[分享]css3图片进入时上下晃动

当我们在网页上添加图片的时候，如果想让图片有一个不同寻常的进入方式，可以使用CSS3的动画效果。比如让图片在进入时上下晃动。img { : relative; animation: shake 0.5...

当我们在网页上添加图片的时候，如果想让图片有一个不同寻常的进入方式，可以使用CSS3的动画效果。比如让图片在进入时上下晃动。

img {
  position: relative;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0% { top: 0; }
  20% { top: -10px; }
  40% { top: 10px; }
  60% { top: -10px; }
  80% { top: 10px; }
  100% { top: 0; }
} 

上述代码中，我们首先将图片的定位方式设置为相对定位，这是因为我们后面会使用top属性控制图片的位置。然后我们定义了一个名为shake的动画，该动画一共有6个状态，每个状态中图片的位置都不同。我们将该动画应用于图片上，设置动画执行时间为0.5秒，以及动画的缓动函数为ease-in-out。

在实际应用中，我们可以将该代码嵌入到网页的CSS文件中，也可以将其写在style标签或者style属性中。使用CSS3的动画效果，可以让网页更加生动和有趣。