要让图片晃动,可以使用CSS动画和关键帧,以下是一个简单的示例:

1、在HTML中插入一张图片:
图片晃动示例
2、在CSS文件(例如styles.css)中添加以下样式:
.shake {
display: inlineblock;
animation: shake 0.5s infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(1px, 2px) rotate(1deg); }
20% { transform: translate(3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, 1px) rotate(1deg); }
50% { transform: translate(1px, 2px) rotate(1deg); }
60% { transform: translate(3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(1deg); }
80% { transform: translate(1px, 1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, 2px) rotate(1deg); }
}
这个示例中,我们创建了一个名为shake的关键帧动画,它会在0.5秒内完成一次完整的循环,我们将这个动画应用到具有.shake类的元素上,使其在页面加载时开始晃动。
注意:请将yourimagesource.jpg替换为你自己的图片源。