css做图片变换动画

在前端开发中，CSS 动画已是必不可少的一个环节，而 CSS 又能实现很多有趣的动画效果，其中之一就是图片变换动画。

CSS 实现图片变换动画，需要使用 CSS3 的 transition 或者 animation 属性。

/* 使用 transition 属性实现图片变换动画 */img {
      transition: transform 1s ease;
}
img:hover {
      transform: scale(1.2);
}
/* 使用 animation 属性实现图片变换动画 */img {
      animation: scale 1s ease-in-out infinite alternate;
}
@keyframes scale {
  0% {
        transform: scale(1);
  }
  100% {
        transform: scale(1.5);
  }
}
    

在上面的代码中，先定义了一个 img 元素，然后通过 transition 和 transform 来实现当鼠标悬停在图片上时，图片能缩放到 1.2 倍大小的动画效果。

而使用 animation 属性则可以实现更复杂的动画效果，其中，@keyframes 规则定义了一个缩放的变换动画，从 0% 开始，图片大小为 1，到 100% 结束，图片大小为 1.5。

通过这样的方式，CSS 动画确实可以让图片变得更有趣，更吸引人。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！