css3 左右摆动特效

CSS3 左右摆动特效

CSS3 是 Cascading Style Sheets 3 的简写，是用于网页设计的一种样式表语言，它能够让我们使用更少的代码实现更多的效果。其中左右摆动特效是 CSS3 中常见的动画效果之一，让我们的网页更加生动有趣。

.Box {
  position: relative;
  left: 0;
  animation: swing 1s ease-in-out infinite;
}

@keyframes swing {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}

在上述代码中，我们首先给需要添加左右摆动特效的元素添加了一个类名为“Box”，并将它的 position 属性设置为 relative，使得接下来设置的动画效果能够按照我们的预期进行。接着，我们使用 animation 属性，设置需要使用的动画名称、持续时间、动画计时函数以及动画循环次数。在这里，我们使用了名为“swing”的动画，设定了动画需要持续 1 秒，动画计时函数为 ease-in-out（表示缓慢在开始和结束时加速，在中间段减速），将动画循环次数设为无限循环。

在接下来的 @keyframes 中，我们定义了动画在不同时间内对元素的 transform 属性进行不同的处理，从而产生左右摆动的效果。具体地，我们在 0% 处将元素的 translateX 值设为 0，表示此时元素不发生移动；在 50% 处，将 translateX 值设为 20px，表示元素此时向右偏移了 20 像素；在 100% 处，将 translateX 值重新设为 0，使得元素恢复到原始位置。通过不断循环上述动画，元素将呈现出一种左右摆动的效果。

总的来说，CSS3 中的左右摆动特效不仅简单易用，而且效果还十分不错。在网页设计过程中，我们可以根据不同需求自由调整左右摆动的速度、距离和计时函数等属性，优化页面的视觉效果，为用户带来更好的使用体验。