[分享]css中左右摇晃的效果怎么做

CSS中左右摇晃的效果可以是一种文本动画效果，通过不断地左右摆动实现文字或图像焦点的吸引。

 .shake {
     animation: shake 0.5s infinite;
 }

 @keyframes shake {
     0% { transform: translateX(0); }
     25% { transform: translateX(-10px); }
     75% { transform: translateX(10px); }
     100% { transform: translateX(0); }
 } 

在上述代码中，我们创建了一个名为“shake”的类，通过应用这个类到 HTML 元素实现左右摇晃的效果。该类中定义了一个循环动画“shake”，它的周期时间为0.5 s，且无限循环。该动画是通过 transform 中的 translateX 属性实现的，该属性的参数值分别为 0px、-10px、10px 和 0px，用以表示元素在动画中的偏移状态。

通过在需要应用该动画的 HTML 元素中引用该类名，即可实现左右摇晃的效果。

 <p class="shake">CSS Shake Effect</p> 

在这个例子中，我们创建了一个类别为“shake”的段落，在该段落中应用了我们先前创建的动画效果。这样，当页面加载时，该段落将不断左右摇晃。