css3实现图片抖动样式

在网页设计中，图片的运用往往是非常重要的。而如果能够通过CSS3实现一些有趣的图片样式，那么就更能吸引访客的目光了。本文介绍如何使用CSS3实现图片抖动样式。

img {
  display: inline-block;
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both infinite;
  transform: translate3d(0,0);
}

@keyframes shake {
  10%,90% {
    transform: translate3d(-1px,0);
  }
  
  20%,80% {
    transform: translate3d(2px,0);
  }

  30%,50%,70% {
    transform: translate3d(-4px,0);
  }

  40%,60% {
    transform: translate3d(4px,0);
  }
}

代码中，我们首先将要抖动的图片设置为“display: inline-block;”以使得图片能够应用动画。接着我们使用keyframes创建名为“shake”的动画，这个动画定义了图片在不同时间点的旋转状态，以实现抖动的效果。

在img标签中我们应用了animation属性，设置动画名称为“shake”，时长为0.82秒，缓动函数为cubic-bezier(.36,.97)，这是一个贝塞尔曲线方程，可以调整动画的速度。同时我们将动画效果应用于图片的“transform”属性，这意味着图片的位置或大小将在动画过程中发生变化。

最后，这个动画将无限循环，直到页面被关闭或动画被移除。这个图片抖动的样式可以让一个图片看起来更有趣和吸引人。