CSS3实现图片抖动效果

在网页制作中，为了提升用户体验和视觉效果，我们经常需要使用动态效果来增强页面的趣味性，其中图片抖动效果是一种十分常见的动态效果。

在CSS3中，可以使用关键帧动画（@keyframes）实现图片抖动效果。下面是实现代码：

/* 定义关键帧动画 */@keyframes shake {
0% {
    transform: rotate(0deg);
}
20% {
    transform: rotate(-30deg);
}
40% {
    transform: rotate(0deg);
}
60% {
    transform: rotate(30deg);
}
80% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(0deg);
}
}
/* 使用动画效果 */img:hover {
    animation: shake 0.8s;
    animation-iteration-count: 1;
}
    

上述代码中，定义了一个名为shake的关键帧动画，通过transform属性控制图片的旋转角度。当鼠标悬浮在图片上时，启动该动画，图片会呈现抖动效果。

除了rotate属性外，还可以使用scale属性实现图片缩放抖动效果等，使用关键帧动画可以实现更加复杂的动态效果，为网页制作增加更多的趣味性。

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