css3实现图片抖动效果 |css同时旋转缩放

在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属性实现图片缩放抖动效果等，使用关键帧动画可以实现更加复杂的动态效果，为网页制作增加更多的趣味性。