css上下晃动动效

在网站开发中，动效是非常重要的一部分。CSS提供了丰富的动效功能，其中上下晃动动效是比较常见的一种。本文将介绍如何使用CSS实现上下晃动动效。

代码如下：
.shake {
  animation-name: shake;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

首先，我们需要定义一个带有晃动效果的类名，比如叫做“shake”。接下来就可以通过CSS中的动画属性来完成上下晃动效果的实现。

首先，我们需要为“shake”类名添加“animation-name”属性，并赋值为“shake”，这样CSS就会去查找名为“shake”的关键帧。接下来，我们需要为“animation-duration”属性赋值，在这个例子中我们设置了1秒来完成这个动绘制效。接下来，我们指定动画的时间函数，这里我们指定使用“ease-in-out”来平滑地运行动画。最后，我们指定动画的重复次数“animation-iteration-count: infinite”。这样动画将会无限循环执行。

下面是“shake”关键帧的定义。在这个关键帧中，我们通过“transform”属性来实现上下晃动的效果。在这个例子中，我们使用了translateY函数将元素沿着y轴向上移动10像素，然后再回到原来的位置，来创建上下晃动的效果。比如在50%这个位置，我们让元素向上移动10像素来创造晃动的效果。

总之，上下晃动动效是CSS中一个非常受欢迎的动画效果。它简单易学，但能够为网站增添生动活泼的感觉，让用户对网站有更好的体验。通过本文的介绍，您已经了解了如何使用CSS实现这种晃动效果，相信您已经有信心在您的网站中应用此技巧了。