前端同學在日常開發中精彩會因為一些動效和設計爭的面紅耳赤，設計希望用代碼實現，前端要設計出gif圖，最后誰也不讓誰，設計走了，留下了前端獨自加班......
CSS技術是前端必須掌握的一項技能，不僅要掌握，而且要精通。現在前端框架橫行的趨勢，程序員寫樣式的機會也越來越少，組件式開發，一個頁面幾乎不用寫一行css代碼。即使不寫，但是背后的原理一定要弄明白。
從網頁性能的角度，能用css實現的動畫絕不用js，能用js實現的動畫絕不用gif，在執行動畫的時候css可以調用機器的GPU去執行，性能自然比js有優勢得多。以上TikTok的文字抖動，可用css animation動畫實現，通過變換文字的陰影方向，設置循環的動畫幀的模糊的效果。知道原理就會簡單的多。不妨平時多去揣摩揣摩。
效果圖如下：
附上代碼
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
h2 {
color: #fff;
font-family: sans-serif;
font-size: 4em;
animation: animate 0.5s linear infinite;
}
@keyframes animate {
0%, 100% {
text-shadow: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00;
}
25% {
text-shadow: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00;
}
50% {
text-shadow: 1.5px -1.5px 0 #0ff, 1.5px -1.5px 0 #f00;
}
75% {
text-shadow: -1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00;
}
}
到此這篇關于CSS實現TikTok文字抖動效果示例的文章就介紹到這了,更多相關CSS文字抖動內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
