Question

如何使用CSS自动放大和缩小图像？我希望动画是连续的。

我找到了一个链接，该链接中有用于放大和缩小背景图像的代码。 How to have an image zoom in and out automatically in the background

但是我想要一个可以自动放大和缩小的简单图像（无背景图像）。

Answer 1

使用transform: scale()

这样做

img {
  animation: zoom 5s infinite;
}

@-webkit-keyframes zoom {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

@keyframes zoom {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

<img src="https://picsum.photos/1900/1900/?random">

如何使用CSS自动放大和缩小图片？

1 个答案: