CSS3字體發(fā)光效果

CSS3 并沒有直接設置發(fā)光效果的屬性，但是可以利用 text-shadow 屬性實現此效果

text-shadow

該屬性為文本添加陰影效果

text-shadow: h-shadow v-shadow blur color;

h-shadow: 水平陰影的位置(陰影水平偏移量)，可為負值，必需

v-shadow: 垂直陰影的位置(陰影垂直偏移量)，可為負值，必需

blur: 陰影模糊的距離(默認為0)，可選

color: 陰影顏色(默認為當前字體顏色)，可選

乍一看，text-shadow 屬性僅僅是用來設置文本陰影的，似乎并不能實現字體發(fā)光效果。

其實不然，這正是 text-shadow 屬性的精妙之處。

當陰影的水平偏移量和垂直偏移量都為0時，陰影就和文本重合了

這時，如果增大陰影模糊的距離，就可以達到字體外發(fā)光的效果了。

當然，為了使外發(fā)光更加酷炫，還需要使用到 text-shadow 的另一個特性: 同時設置多個陰影(使用逗號分隔設置多個陰影)

代碼實例

HTML Code

<div class="container"><p>xinpureZhu</p> </div>

CSS Code

body {background: #000; } .container {width: 600px;margin: 100px auto 0; } p {font-family: 'Audiowide';text-align: center;color: #00a67c;font-size: 7em;-webkit-transition: all 1.5s ease;transition: all 1.5s ease; } p:hover {color: #fff;-webkit-animation: Glow 1.5s ease infinite alternate;animation: Glow 1.5s ease infinite alternate;} @-webkit-keyframes Glow {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00a67c,0 0 70px #00a67c,0 0 80px #00a67c,0 0 100px #00a67c,0 0 150px #00a67c;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #00a67c,0 0 35px #00a67c,0 0 40px #00a67c,0 0 50px #00a67c,0 0 75px #00a67c;} } @keyframes Glow {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00a67c,0 0 70px #00a67c,0 0 80px #00a67c,0 0 100px #00a67c,0 0 150px #00a67c;}to {text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #00a67c,0 0 35px #00a67c,0 0 40px #00a67c,0 0 50px #00a67c,0 0 75px #00a67c;} }

?

效果示圖

?

文章轉載：https://xinpure.com/the-css3-font-glow-effect/

轉載于:https://www.cnblogs.com/blackfriday/p/8603984.html

總結

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

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