CSS 熒光效果其實就是給文本或者元素添加一個發(fā)光的效果,可以讓頁面看起來更加炫酷。
要實現(xiàn) CSS 熒光效果,我們可以使用 text-shadow 屬性,該屬性接受多組參數(shù)值,將會分別產(chǎn)生多個發(fā)光效果,實現(xiàn)熒光的效果。下面是一個簡單的例子:
.text {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00f;
}
上述代碼中,text-shadow 屬性的參數(shù)值分別為偏移量、模糊半徑和顏色值。偏移量表示發(fā)光效果的位置。模糊半徑越大,發(fā)光的范圍就越大。顏色值可以自定義,可以是白色也可以是其它顏色。
除了使用 text-shadow 屬性,還可以使用 HTML5 的 canvas 實現(xiàn)熒光效果。代碼如下:
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 150;
document.body.appendChild(canvas);
// 設(shè)置漸變
var grd = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
grd.addColorStop(0, '#fff');
grd.addColorStop(0.4, '#fff');
grd.addColorStop(0.6, '#000');
grd.addColorStop(1, '#000');
// 繪制文本
ctx.fillStyle = grd;
ctx.font = 'bold 40px Arial';
ctx.fillText('Hello World!', 50, 100);
上述代碼中,我們首先創(chuàng)建了一個 canvas 元素,然后獲取了 canvas 的上下文對象。接著,我們設(shè)置了一個漸變,用于產(chǎn)生熒光效果。最后,我們使用 fillText 方法在 canvas 上繪制了文本。
以上就是 CSS 熒光效果的實現(xiàn)方法。無論使用 text-shadow 屬性,還是使用 HTML5 的 canvas,都可以實現(xiàn)炫酷的熒光效果。
上一篇css 獲取第二個類
下一篇css 藥物