抖音的那个字是不是很酷炫呢？它是如何实现的呢？这一次的CSS笔记就和大家分享下实现抖音文字彩色抖动效果这个CSS特效。

• 代码来源：详情1
• 代码来源：详情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);
}

效果：

有趣的彩色眩晕文字 - Npcink

第二个：彩色抖动文字

.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)
    }
};
  }
}

效果：

彩色抖动文字 - Npcink

第三个：抖音彩色抖动文本

• 参考链接：知乎

太复杂了，链接中有详细的步骤说明可供参考。