CSS3流光文字是一種效果非常炫酷的文字效果,具有非常強的視覺沖擊力。使用CSS3的漸變屬性,我們可以很容易地實現流光文字效果。
.shine {
background: -webkit-linear-gradient(left, #d4fcff, #00d2ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
如上所示的代碼就是實現流光文字的CSS代碼,其中shine是類名,你可以給任何想要應用該效果的元素添加這個類名即可實現流光文字效果。
代碼中的實現原理是將背景設置成了漸變色,并使用了CSS的background-clip屬性以及text-fill-color屬性。其中background-clip屬性規定了背景的繪制區域為文本區域,而text-fill-color屬性規定了文本顏色為完全透明。
另外需要注意的是,上方的代碼針對的是Webkit內核的瀏覽器,如果要兼容其他瀏覽器,需要增加其他前綴的樣式。
最終,我們得到的效果是如圖片所示的流光文字效果:
總的來說,CSS3流光文字是一種效果十分酷炫的文字效果,其實現原理也較為簡單。值得我們在網頁設計中嘗試使用。
上一篇php 7 ftp