CSS3實(shí)現(xiàn)字體發(fā)光效果的方法?這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
城口網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)!從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作,到程序開發(fā),運(yùn)營維護(hù)。創(chuàng)新互聯(lián)于2013年創(chuàng)立到現(xiàn)在10年的時(shí)間,我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn),來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
該屬性為文本添加陰影效果
text-shadow: h-shadow v-shadow blur color;
h-shadow
: 水平陰影的位置(陰影水平偏移量),可為負(fù)值,必需
v-shadow
: 垂直陰影的位置(陰影垂直偏移量),可為負(fù)值,必需
blur
: 陰影模糊的距離(默認(rèn)為0),可選
color
: 陰影顏色(默認(rèn)為當(dāng)前字體顏色),可選
乍一看,text-shadow 屬性僅僅是用來設(shè)置文本陰影的,似乎并不能實(shí)現(xiàn)字體發(fā)光效果。
其實(shí)不然,這正是 text-shadow 屬性的精妙之處。
當(dāng)陰影的水平偏移量和垂直偏移量都為0時(shí),陰影就和文本重合了
這時(shí),如果增大陰影模糊的距離,就可以達(dá)到字體外發(fā)光的效果了。
當(dāng)然,為了使外發(fā)光更加酷炫,還需要使用到 text-shadow 的另一個(gè)特性: 同時(shí)設(shè)置多個(gè)陰影(使用逗號(hào)分隔設(shè)置多個(gè)陰影)
xinpureZhu
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; } }
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)CSS3實(shí)現(xiàn)字體發(fā)光效果的方法大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。