温馨提示：
本文所述内容不具普遍性，可能因操作环境差异而与实际有所出入，故请勿照搬照抄，仅供参考。
呼吸灯效果
源码
<!DOCTYPE html>
<span class="name">Name</span>
<style>
.name{
font-size:50px;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #FF512F;
font-weight: 700;
text-shadow: 0px 0px 7px #ffd800;
background-image: linear-gradient(90deg, #ffd800 0%, #ff512f 100%, #fff);
animation: glow-animation 2s infinite linear;
color: #FFC0CB;
box-sizing: border-box;
vertical-align: inherit;
@keyframes glow-animation{
0%{filter:hue-rotate(-360deg)}
100%{filter:hue-rotate(360deg)}
</style>抖音效果
代码
<!DOCTYPE html>
<span class="doudong">Name</span>
<style>
.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 {
text-shadow: none
25% {
text-shadow: -2px -2px 0 #ff0048,2px 2px 0 #3234ff
50% {
text-shadow: 2px -2px 0 #ff0048,-2px 2px 0 #3234ff
75% {
text-shadow: -2px 2px 0 #ff0048,2px -2px 0 #3234ff
100% {
text-shadow: 2px 2px 0 #ff0048,-2px -2px 0 #3234ff
@keyframes uk-flicker {
opacity: 0
10% {
opacity: .6;
transform: scale(.8)
20% {
opacity: 0
40% {
opacity: 1
50% {
opacity: .2;
transform: scale(1.1)