css3 滑过图片抖一抖动画

CSS3作为前端开发中不可或缺的一部分，其强大的样式效果常常能够使网页更加活跃。今天我们来讲一下关于CSS3滑过图片抖一抖的动画效果。

img:hover {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}
@keyframes shake {
0% {
     transform: translate(0);
 }
10%, 30%, 50%, 70%, 90% {
     transform: translate(-5px, 0);
 }
20%, 40%, 60%, 80% {
     transform: translate(5px, 0);
 }
100% {
     transform: translate(0);
 }
}
    

这里我们使用动画属性animation来实现滑过图片抖一抖效果。首先在img:hover状态下调用动画函数，然后设置动画持续时间0.5s，无限循环的次数。接下来是动画的具体实现。
@keyframes是关键帧动画，这里我们将抖动效果分成五个阶段，每个阶段都采用translate函数来实现相对位移。从左到右的动作可以通过translate(-5px, 0)来实现，从右到左的动作可以通过translate(5px, 0)来实现。最后，在100%时回到原来的位置，结束当前动画。

通过上述代码，我们可以简单地实现一个滑过图片抖一抖的动画效果，增加网页的活力。

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