代码不多，不截图了，可自行尝试
说明
css部分比较冗余，是因为考虑到了适配情况。可酌情删减
-webkit-animation-name: shaky-slow; // webkit内核-ms-animation-name: shaky-slow; // ie内核animation-name: shaky-slow; // 原生animation-duration: 4s; // 动画执行时间animation-delay: 0s; // 动画等待时间animation-iteration-count: infinite; // 动画执行次数，infinite为一直执行animation-timing-function: ease-in-out; // 动画执行速度animation-delay: 0s; // 动画延时时间animation-play-state: running; // 动画执行状态，一般没必要parse
元素标签
<p class="shaky">文字文字文字</p>
css部分
.shaky { display: inline-block; padding: 1px; font-size: 12px; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation-name: shaky-slow; -ms-animation-name: shaky-slow; animation-name: shaky-slow; -webkit-animation-duration: 4s; -ms-animation-duration: 4s; animation-duration: 4s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running;
}
@-webkit-keyframes shaky-slow {
0% { -webkit-transform: translate(0px, 0px) rotate(0deg);
}
2% { -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg);
}
4% { -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg);
}
6% { -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg);
}
8% { -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg);
}
10% { -webkit-transform: translate(1.4px, 0px) rotate(-2deg);
}
12% { -webkit-transform: translate(-1.3px, -1px) rotate(-2deg);
}
14% { -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg);
}
16% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg);
}
18% { -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg);
}
20% { -webkit-transform: translate(1px, 1px) rotate(-0.5deg);
}
22% { -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg);
}
24% { -webkit-transform: translate(-1.4px, -1px) rotate(2deg);
}
26% { -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg);
}
28% { -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg);
}
30% { -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
}
32% { -webkit-transform: translate(-1px, 0px) rotate(2deg);
}
34% { -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg);
}
36% { -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg);
}
38% { -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg);
}
40% { -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg);
}
42% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
}
44% { -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg);
}
46% { -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
}
48% { -webkit-transform: translate(1px, 1.6px) rotate(1.5deg);
}
50% { -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg);
}
52% { -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg);
}
54% { -webkit-transform: translate(1.6px, -1px) rotate(-2deg);
}
56% { -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg);
}
58% { -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg);
}
60% { -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg);
}
62% { -webkit-transform: translate(0px, 0px) rotate(-1.5deg);
}
64% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
66% { -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg);
}
68% { -webkit-transform: translate(0px, -1.6px) rotate(-2deg);
}
70% { -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg);
}
72% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
}
74% { -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg);
}
76% { -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg);
}
78% { -webkit-transform: translate(-1px, 1.4px) rotate(2deg);
}
80% { -webkit-transform: translate(1.4px, 1.6px) rotate(2deg);
}
82% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
}
84% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg);
}
86% { -webkit-transform: translate(1px, 1.4px) rotate(-2deg);
}
88% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
}
90% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
92% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
}
94% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
96% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg);
}
98% { -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg);
}
}
@keyframes shaky-slow {
0% { transform: translate(0px, 0px) rotate(0deg);
}
2% { transform: translate(-1px, 1.5px) rotate(1.5deg);
}
4% { transform: translate(1.3px, 0px) rotate(-0.5deg);
}
6% { transform: translate(1.4px, 1.4px) rotate(-2deg);
}
8% { transform: translate(-1.3px, -1px) rotate(-1.5deg);
}
10% { transform: translate(1.4px, 0px) rotate(-2deg);
}
12% { transform: translate(-1.3px, -1px) rotate(-2deg);
}
14% { transform: translate(1.5px, 1.3px) rotate(1.5deg);
}
16% { transform: translate(1.5px, -1.5px) rotate(-1.5deg);
}
18% { transform: translate(1.3px, -1.3px) rotate(-2deg);
}
20% { transform: translate(1px, 1px) rotate(-0.5deg);
}
22% { transform: translate(1.3px, 1.5px) rotate(-2deg);
}
24% { transform: translate(-1.4px, -1px) rotate(2deg);
}
26% { transform: translate(1.3px, -1.3px) rotate(0.5deg);
}
28% { transform: translate(1.6px, -1.6px) rotate(-1.5deg);
}
30% { transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
}
32% { transform: translate(-1px, 0px) rotate(2deg);
}
34% { transform: translate(1.3px, 1.3px) rotate(-0.5deg);
}
36% { transform: translate(1.3px, 1.6px) rotate(1.5deg);
}
38% { transform: translate(1.3px, -1.6px) rotate(1.5deg);
}
40% { transform: translate(-1.4px, -1px) rotate(-0.5deg);
}
42% { transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
}
44% { transform: translate(-1.6px, 1.4px) rotate(0.5deg);
}
46% { transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
}
48% { transform: translate(1px, 1.6px) rotate(1.5deg);
}
50% { transform: translate(1.6px, 1.6px) rotate(1.5deg);
}
52% { transform: translate(-1.4px, 1.6px) rotate(0.5deg);
}
54% { transform: translate(1.6px, -1px) rotate(-2deg);
}
56% { transform: translate(1.3px, -1.6px) rotate(-2deg);
}
58% { transform: translate(-1.3px, -1.6px) rotate(0.5deg);
}
60% { transform: translate(1.3px, 1.6px) rotate(-0.5deg);
}
62% { transform: translate(0px, 0px) rotate(-1.5deg);
}
64% { transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
66% { transform: translate(1.6px, -1.6px) rotate(0.5deg);
}
68% { transform: translate(0px, -1.6px) rotate(-2deg);
}
70% { transform: translate(-1.6px, 1px) rotate(1.5deg);
}
72% { transform: translate(-1.6px, 1.6px) rotate(2deg);
}
74% { transform: translate(1.3px, -1.6px) rotate(-0.5deg);
}
76% { transform: translate(1.4px, 1px) rotate(-0.5deg);
}
78% { transform: translate(-1px, 1.4px) rotate(2deg);
}
80% { transform: translate(1.4px, 1.6px) rotate(2deg);
}
82% { transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
}
84% { transform: translate(-1.4px, 1.4px) rotate(-2deg);
}
86% { transform: translate(1px, 1.4px) rotate(-2deg);
}
88% { transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
}
90% { transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
92% { transform: translate(-1.4px, 1.6px) rotate(2deg);
}
94% { transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
96% { transform: translate(-1.4px, 1.3px) rotate(-2deg);
}
98% { transform: translate(1.3px, 1px) rotate(-0.5deg);
}
}
作者：世外大帝
链接：https://www.jianshu.com/p/720c9d18a73e
随时随地看视频
