[分享]css动画改变图片大小

在网页设计中，图片是不可或缺的元素，它们可以使网页更生动、更吸引人。如果我们能为图片添加一些动态效果，比如改变图片的大小，那么网页的视觉效果会更好。img:hover { width: 300px; ...

在网页设计中，图片是不可或缺的元素，它们可以使网页更生动、更吸引人。如果我们能为图片添加一些动态效果，比如改变图片的大小，那么网页的视觉效果会更好。

img:hover {
  width: 300px;
  height: 200px;
  transition: all 0.5s ease-in-out;
} 

以上是一个简单的CSS代码，它可以让图片在鼠标悬停时自动扩大为300*200像素。其中，transition: all 0.5s ease-in-out;指定了过渡效果的时间和速度。

如果我们想要让图片在一段时间内逐渐放大，可以使用CSS的关键帧动画（@keyframes）。下面是一个例子：

img {
  width: 200px;
  height: 150px;
  animation: zoom-in-out 5s infinite;
}

@keyframes zoom-in-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
} 

以上代码会让图片在5秒钟内不断地缩放。其中，animation: zoom-in-out 5s infinite;指定了动画名称、时长和重复次数。而@keyframes zoom-in-out {}里面定义了图片的缩放属性，分别在0%、50%和100%的时候将图片的大小分别设置为原大小、放大30%和恢复原大小。

通过上面的两个例子，我们可以为图片添加一些生动的动态效果，让网页更加动感。通过更多的学习和实践，我们可以掌握更多CSS动画技巧，让网页设计更加丰富和精彩。