css 如何给图片加动画效果

在网站设计中，加入动画效果能够增加用户体验，提升页面的视觉效果。CSS可以帮助我们为图片添加动画效果，下面就让我们一起来学习吧。

img:hover{
      animation: shake 0.5s;
}
@keyframes shake {
  0% {
    transform: translate(0);
}
  20% {
    transform: translate(-8px, 0);
}
  40% {
    transform: translate(8px, 0);
}
  60% {
    transform: translate(-8px, 0);
}
  80% {
    transform: translate(8px, 0);
}
  100% {
    transform: translate(0);
}
}
    

上述代码是一个非常简单的图片动画效果，当鼠标在图片上悬浮时，图片会产生抖动效果。首先，我们需要使用伪类:hover来识别鼠标的动作，然后使用animation属性为图片添加动画效果，最后使用@keyframes来定义动画的细节。

其中，@keyframes被用来定义shake动画，它会让图片在页面上产生一些微小的位移，造成抖动的效果。我们可以自己设置关键帧的位置来创造不同的动画效果。在这里，我们设置图片在0%、20%、40%、60%、80%、100%时的位置，从而构成了一个滑动的效果。

如果你想要为图片添加更多的动画效果，可以尝试改变animation属性里的参数，比如不同的持续时间或者不同的动画效果（比如淡入淡出或者旋转）。另外，你也可以使用CSS3的transition属性为图片添加平滑的动态效果。

总之，CSS提供了许多方法来给图片添加动画效果，我们只需要多动手尝试，在实现它们的过程中也能够更好地掌握CSS的知识。

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