css图片晃动的代码

在网页设计中，加入动态效果能够有效提高页面的视觉效果与交互体验。其中，CSS的图片晃动效果是一种简单却十分有趣的效果，可以为网页增添活力。下面，我将为大家介绍如何使用CSS，让图片实现晃动效果。 首先，在HTML中添加一个图片：

我是一只可爱的小猫咪：

接着，在CSS中为图片添加样式属性：

img {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-10px);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}

代码解析： - animation: shake 0.5s;：添加一个名为“shake”的动画，时长为0.5秒； - animation-iteration-count: infinite;：动画重复次数为无限次； - @keyframes shake：定义名为“shake”的关键帧动画； - 0%：动画开始前的状态； - 25%：向左偏移10像素； - 50%：恢复原位； - 75%：向右偏移10像素； - 100%：恢复原位。 最终结果：图片将会在页面上不停地左右晃动，效果如下：

我是一只可爱的小猫咪：

使用CSS实现图片晃动，轻松又有趣。希望本文能对大家有所帮助，让你的网页更加生动活泼。