給網站文字添加高逼格效果

• 2019 年 12 月 24 日
• 筆記

自己網站導航頁一向比較「文靜」，作為一個愛搗鼓的孩子，豈能任由其頁面惡性發展，抖音看多了，想著是不是可以給自己的文字添加一下抖音效果，不料，網上資料是如此稀少，在借鑒了 滄水 大佬的程式碼後，分析其原理，就是一個CSS3動畫效果，讓自己的陰影左右擺動形成的，效果就是上面的圖片效果，同時你可以點擊下面鏈接去查看實際的效果哦！！！

https://demo.debuginn.cn/

程式碼奉上

.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: -1px -1px 0 #ff0048,1px 1px 0 #3234ff        }        50% {          text-shadow: 1px -1px 0 #ff0048,-1px 1px 0 #3234ff        }        75% {          text-shadow: -1px 1px 0 #ff0048,1px -1px 0 #3234ff        }        100% {          text-shadow: 1px 1px 0 #ff0048,-1px -1px 0 #3234ff        }      }      @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)        }      }

給自己的元素div加上 .doudong 就可以實現了，不管可以文字有效果，圖片或者任意元素都有抖音效果，看著挺好玩的，想玩的可以拿去用哦。

本文鏈接：https://www.debuginn.cn/3445.html

本文採用CC BY-NC-SA 3.0 Unported協議進行許可，轉載請保留此文章鏈接