CSS作為一個網頁設計的基礎語言之一,可以實現很多比較炫酷的效果。其中,比較常見的就是光暈字,本文將為大家介紹CSS如何制作光暈字。
h1 { font-size: 72px; background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0px 0px 60px rgba(255, 255, 255, 0.5); }
通過上述代碼,可以看到實現光暈字的原理是通過設置文字背景漸變,將文字顏色設置為透明,然后用文本陰影實現光暈的效果。
其中,-webkit-linear-gradient為設置背景顏色漸變的語法,#eee和#333分別為起始點和結束點的顏色值,-webkit-background-clip則為指定背景剪裁方式,這里我們使用text剪裁文本,-webkit-text-fill-color為設置文字顏色,這里設為透明。
最后,通過text-shadow來實現光暈的效果,0px 0px指定為文字陰影的偏移量,60px則指定為文字陰影的模糊半徑,和透明度設置rgba(255, 255, 255, 0.5)。
以上就是制作光暈字的CSS代碼,希望對大家能有所幫助。