css部分:

*{/* 頁面內外邊距初始化 */margin: 0;padding: 0;}.text{/* 100%的窗口高度 */height: 100vh;display: flex;justify-content: center;align-items: center;background-color: slateblue;}span{font-size:100px;font-weight: 700;color:yellow;/* 轉換為大寫 */text-transform: uppercase;/* 字間距 */letter-spacing: 6px;/* 模糊濾鏡 */filter: blur(2px);/* 執行動畫 */animation:trans 3s linear infinite;}/* 定義動畫 */@keyframes trans{0%,100%{color: yellow;filter: blur(2px);/* 文字陰影 */text-shadow:0 0 10px lightgreen,0 0 20px lightgreen,0 0 30px lightgreen,0 0 40px lightgreen,0 0 100px lightgreen,0 0 200px lightgreen,0 0 300px lightgreen,0 0 400px lightgreen;}5%,95%{color:skyblue;filter: blur(0px);text-shadow: none;}}/* 為每一個span標簽設置動畫延遲時間 */span:nth-child(1){animation-delay: 0s;}span:nth-child(2){animation-delay: 0.6s;}span:nth-child(3){animation-delay: 1.2s;}span:nth-child(4){animation-delay: 1.8s;}span:nth-child(5){animation-delay: 2.4s;}span:nth-child(6){animation-delay: 3.0s;}

html部分:

<div class="text"><span>h</span><span>i</span><span>w</span><span>e</span><span>b</span></div>

頁面效果圖:

?

總結

以上是生活随笔為你收集整理的用html和css实现字体发光效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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