用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)
}
}
然后用class选择器引用就可以了,比如:
<span class="shaky">你在说什么( ,,´・ω・)ノ"(´っω・`。)</span>
2019-08-21 11:17:23 回复
评论页面好酷哇
2018-11-09 18:29:33 回复
第一次评论,博主的评论模块用的是什么,很好看。
2018-10-24 09:08:47 回复
怎么改抖动的频率啊
2018-11-09 18:27:42
他是两个两个过度的,改大点应该就行了,比如从10%跳到20%,以此类崔
2018-05-26 13:05:44 回复
不错
2018-05-19 11:52:57 回复
很强的功能
2018-05-19 02:57:18 回复
每次看都要重新评论一下+1
2018-05-17 00:31:12 回复
谢谢博主分享教程 ::aru:smile::
2018-05-15 11:03:17 回复
666
2018-05-01 22:26:08 回复
.。。。。。。。。。。。。。。
2018-04-24 21:52:03 回复
每次看的时候,我都要评论一下