摘要：
怎么实现抖音文字彩色抖动效果？
抖音的那个字是不是很酷炫呢？它是如何实现的呢？这一次的CSS笔记就和大家分享下实现抖音文字彩色抖动效果这个CSS特效
代码演示1
CSS代码（里面渐变颜色可以自己修改）
.doudong{ an...
怎么实现抖音文字彩色抖动效果？
抖音的那个字是不是很酷炫呢？它是如何实现的呢？这一次的CSS笔记就和大家分享下实现抖音文字彩色抖动效果这个CSS特效
- 代码演示1
CSS代码（里面渐变颜色可以自己修改）
.doudong{ animation: uk-text-shadow-glitch .65s cubic-bezier(1,-1.91,0,2.79) 0s infinite normal both running; } @keyframes uk-text-shadow-glitch { 0% { text-shadow: none } 25% { text-shadow: -2px -2px 0 #ff004f,2px 2px 0 #00f7ef } 50% { text-shadow: 2px -2px 0 #ff004f,-2px 2px 0 #00f7ef } 75% { text-shadow: -2px 2px 0 #ff004f,2px -2px 0 #00f7ef } 100% { text-shadow: 2px 2px 0 #ff004f,-2px -2px 0 #00f7ef } } @keyframes uk-flicker { 0% { opacity: 0 } 10% { opacity: .6; transform: scale(.8) } 20% { opacity: 0 } 40% { opacity: 1 } 50% { opacity: .2; transform: scale(1.1) } 100% { opacity: 1; transform: scale(1) }
}
将以下代码插入需要增加的位置
<h2 class="doudong">欢迎来到MDP BLOG!</h2>
- 代码演示2
有趣的眩晕文字：
.n-xy {
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
代码演示列如：
欢迎来到MDP BLOG!
- 代码演示3
跳动抖音眩晕文字代码：
本站用的就是抖动代码
.douyinwenzi{animation:uk-text-shadow-glitch .65s cubic-bezier(1,-2.91,0,3.79) 0s infinite normal both running}
@keyframes uk-text-shadow-glitch{0%{text-shadow:none}
25%{text-shadow:-1px -1px 0 rgba(0,255,255,.5),1px 1px 0 rgba(255,0,0,.5)}
50%{text-shadow:1px -1px 0 rgba(0,255,255,.5),-1px 1px 0 rgba(255,0,0,.5)}
75%{text-shadow:-1px 1px 0 rgba(0,255,255,.5),1px -1px 0 rgba(255,0,0,.5)}
100%{text-shadow:1px 1px 0 rgba(0,255,255,.5),-1px -1px 0 rgba(255,0,0,.5)}
}
代码演示列如：
