文字抖动动画是网页中常见的微交互效果，通过CSS的类选择器可以非常便捷地实现该效果，不需要依赖JavaScript逻辑，仅通过样式定义就能完成动画的配置与应用。
实现原理说明
使用类选择器实现文字抖动动画的核心逻辑分为两步：首先通过@keyframes规则定义抖动的动画关键帧，描述文字在不同时间点的位移状态；然后通过类选择器绑定animation属性，将定义好的动画应用到对应的文字元素上。
具体实现步骤
第一步：定义抖动动画关键帧
我们需要先定义一个名为text_shake的动画，设置文字在动画周期内的水平位移变化，模拟抖动的视觉效果。
/* 定义文字抖动动画关键帧 */
@keyframes text_shake {
0% {
transform: translateX(0);
}
10% {
transform: translateX(-5px);
}
20% {
transform: translateX(5px);
}
30% {
transform: translateX(-5px);
}
40% {
transform: translateX(5px);
}
50% {
transform: translateX(-3px);
}
60% {
transform: translateX(3px);
}
70% {
transform: translateX(-2px);
}
80% {
transform: translateX(2px);
}
90% {
transform: translateX(-1px);
}
100% {
transform: translateX(0);
}
}
第二步：定义类选择器样式
接下来定义一个类选择器，将刚才创建的动画绑定到该类中，同时配置动画的持续时间、循环方式等属性。
/* 定义抖动动画的类选择器 */
.shake_text {
/* 绑定动画名称和时长 */
animation: text_shake 0.8s ease;
/* 动画只播放一次 */
animation-iteration-count: 1;
/* 可选：设置动画播放完成后保持最终状态 */
animation-fill-mode: forwards;
}
第三步：在HTML中应用类选择器
最后只需要在需要添加抖动效果的文字元素上添加shake_text类即可，无需额外的JavaScript代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字抖动动画示例</title>
<style>
/* 这里放置上面定义的@keyframes和.shake_text样式 */
@keyframes text_shake {
0% {
transform: translateX(0);
}
10% {
transform: translateX(-5px);
}
20% {
transform: translateX(5px);
}
30% {
transform: translateX(-5px);
}
40% {
transform: translateX(5px);
}
50% {
transform: translateX(-3px);
}
60% {
transform: translateX(3px);
}
70% {
transform: translateX(-2px);
}
80% {
transform: translateX(2px);
}
90% {
transform: translateX(-1px);
}
100% {
transform: translateX(0);
}
}
.shake_text {
animation: text_shake 0.8s ease;
animation-iteration-count: 1;
animation-fill-mode: forwards;
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<p class="shake_text">这段文字会触发抖动动画</p>
<p>这段文字没有添加抖动效果</p>
</body>
</html>
参数调整说明
如果需要调整抖动的效果，可以修改以下参数：
- 修改
@keyframes中的translateX数值，调整抖动的幅度 - 修改
animation属性的时长数值，调整抖动的快慢 - 将
animation-iteration-count改为infinite，可以让动画无限循环播放 - 调整
animation-timing-function的值，可以改变抖动的节奏，比如换成linear匀速效果
注意事项
如果需要对多个不同的元素设置不同的抖动效果，可以定义多个不同的类选择器，绑定不同的动画关键帧即可。另外，如果页面中需要动态触发抖动动画，也可以通过JavaScript给目标元素添加对应的类来实现，动画播放完成后可以移除该类，方便下次再次触发。