[css] 用css3实现文字发光的效果
生活随笔
收集整理的這篇文章主要介紹了
[css] 用css3实现文字发光的效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
[css] 用css3實現文字發光的效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>霓虹文本</title> </head> <style>@import url(https://fonts.googleapis.com/css?family=Pacifico);body {display: flex;height: 100vh;justify-content: center;align-items: center;text-align: center;background: black;}.neon {color: #cce7f8;font-size: 2.5rem;font-family: 'Pacifico', cursive;text-transform: uppercase;animation: shining 0.1s alternate infinite;}@keyframes shining {from {text-shadow: 0 0 6px rgba(182, 211, 207, 0.9),0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 115, 223, 0.5),0 0 21px rgba(15, 115, 223, 0.9), 0 0 34px rgba(15, 115, 223, 0.8),0 0 54px rgba(15, 115, 223, 0.9);}to {text-shadow: 0 0 6px rgba(182, 211, 207, 1),0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 115, 223, 0.6),0 0 22px rgba(15, 115, 223, 0.8), 0 0 38px rgba(15, 115, 223, 0.9),0 0 60px rgba(15, 115, 223, 1);}} </style><body><div class="neon">Good evening, and good night!</div> </body></html>個人簡介
我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論
主目錄
與歌謠一起通關前端面試題
總結
以上是生活随笔為你收集整理的[css] 用css3实现文字发光的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 有关csdn博客账号注销说明
- 下一篇： Cadence Allegro 差分走线