CSS發光字動效是一種非常酷炫的網頁動效,可以為你的網頁帶來更多的瀏覽體驗。下面來介紹一下如何使用CSS實現發光字動效。
glow { color: #fff; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff; animation: glow 2s ease-in-out infinite; } @keyframes glow { 0% { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff; } 50% { text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff; } 100% { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff; } }
首先,你需要創建一個CSS class,比如這里的“glow”。接下來,你需要設置這個CSS class的顏色和text-shadow屬性。text-shadow用來實現文字發光的效果。這里我們設置了三個不同大小和透明度的text-shadow,因此可以看到文字發出了非常酷炫的光效。
接下來,我們需要定義一個CSS動畫來讓這個glow效果不斷閃耀。我們使用了@keyframes關鍵字來定義動畫。我們設置了三個不同的關鍵幀,從文字最初的text-shadow開始,到第二個關鍵幀時text-shadow逐漸放大,最后回到初始狀態。
最后,將這個CSS class應用到你的文字元素中,就可以看到你的文字帶著酷炫的發光效果了!
上一篇css 取屏寬度
下一篇css 去除左右邊框線