CSS中左右摇晃的效果可以是一种文本动画效果,通过不断地左右摆动实现文字或图像焦点的吸引。 .shake { animation: shake 0.5s infinite; } @keyframes
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”的段落,在该段落中应用了我们先前创建的动画效果。这样,当页面加载时,该段落将不断左右摇晃。
粉丝
0
关注
0
收藏
0