前端同學在日常開發中精彩會因為一些動效和設計爭的面紅耳赤，設計希望用代碼實現，前端要設計出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文字抖动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。