css动画图片抖动效果 |css3图片循环摆动

首先，在CSS中，大家可以使用以下代码来定义一个图片：

img {
width: 200px;
height: 200px;
background-image: url('path-to-image.jpg');
background-size: cover;
border: none;
}

以上代码会将图片放在一个200px*200px的容器中，并设置背景图片。大家可以通过调整这些属性来自定义图片的样式。

接下来，大家可以使用以下代码为图片添加抖动效果：

img:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes shake {
from { transform: translateX(0); }
to { transform: translateX(10px); }
}

以上代码使用了CSS3动画效果中的关键帧（keyframes）功能。大家为鼠标悬停在图片上的状态定义了一个“shake”类，这个类将让图片在一个周期内不断地来回摆动。大家可以通过修改动画的持续时间、循环次数、摆动的方向和距离等属性来自定义抖动效果的样式。

总的来说，CSS动画效果是网页设计中非常有用的一种技术，可以让大家更加灵活地控制页面元素的样式和动态效果，增加用户的体验和吸引力。