抖音的那個(gè)字是不是很酷炫呢？它是如何實(shí)現(xiàn)的呢？這一次的CSS筆記就和大家分享下實(shí)現(xiàn)抖音文字彩色抖動(dòng)效果這個(gè)CSS特效。

• 代碼來(lái)源：詳情1
• 代碼來(lái)源：詳情2

第一個(gè)，有趣的眩暈文字：

.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

第二個(gè)：彩色抖動(dòng)文字

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

效果：

彩色抖動(dòng)文字 – Npcink

第三個(gè)：抖音彩色抖動(dòng)文本

• 參考鏈接：知乎

太復(fù)雜了，鏈接中有詳細(xì)的步驟說(shuō)明可供參考。