css3實(shí)現(xiàn)背景顏色漸變的方法

午制作網(wǎng)頁(yè)時(shí)，寫了一個(gè)利用 CSS3 實(shí)現(xiàn)網(wǎng)頁(yè)背景顏色漸變的效果，晚上整理代理時(shí)，發(fā)現(xiàn)這效果還挺好玩的。記錄下來(lái)，以后再寫這種網(wǎng)頁(yè)背景顏色漸變的效果時(shí)，只能復(fù)制就行了。

網(wǎng)頁(yè)背景顏色的漸變，利用了 CSS3 中的 Gradients 屬性，下面飛鳥慕魚就來(lái)詳細(xì)的說(shuō)一說(shuō)哦。

CSS3 的漸變效果有兩種，分別為：Linear Gradients(線性漸變) 和 Radial Gradients(徑向漸變)。

CSS3 linear-gradient定義和用法

Linear Gradients 定義：用線性漸變創(chuàng)建一個(gè)背景圖像

語(yǔ)法：

background-image: linear-gradient(point,color1,color2,.....);

參數(shù)：

point：(可選)為漸變的坐標(biāo)值，如省略則默認(rèn)從上到下漸變，

color：為顏色值，可以寫入多個(gè)，如：red，#fff

1、CSS3 背景顏色四個(gè)方向的線性漸變

/**默認(rèn)向下漸變*/
background-image: linear-gradient( red , yellow);
/**向上漸變*/
background-image: linear-gradient(to top ,red , yellow);
/**向右漸變*/
background-image: linear-gradient(to right ,red , yellow);
/**向左漸變*/
background-image: linear-gradient(to left ,red , yellow);

運(yùn)行結(jié)果：

了線性漸變以外，HTML 5 Canvas API還支持徑向漸變（放射性漸變），就是顏色會(huì)介于兩個(gè)指定圓間的錐形區(qū)域平滑變化。徑向漸變和線性漸變使用了顏色終止點(diǎn)是一樣的，如果要實(shí)現(xiàn)它，就需要使用方法createRadialGradient。

繪制徑向漸變

createRadialGradient（x0，y0，r0，x1，y1，r1）方法表示沿著兩個(gè)圓之間的錐面繪制漸變。其中前三個(gè)參數(shù)代表開始的圓，圓心為（x0，y0），半徑為r0。最后三個(gè)參數(shù)代表結(jié)束的圓，圓心為（x1，y1），半徑為r1。

（1）編寫代碼如下圖所示，在<body>標(biāo)簽中加入以下代碼。

（2）在瀏覽器中打開文件，預(yù)覽效果圖如下所示，可以看到網(wǎng)頁(yè)中，從圓心的中心亮點(diǎn)開始向外逐步發(fā)散，形成了一個(gè)徑向漸變。

小提示：上面代碼中，首先創(chuàng)建漸變對(duì)象gradient，此處使用方法createRadialGradient創(chuàng)建了一個(gè)徑向漸變，下面使用addColorStop添加顏色，最后將漸變填充到上下文環(huán)境中。

tml的css3實(shí)現(xiàn)帶漸變的炫酷按鈕

用到的技術(shù)有CSS3的漸變，CSS3動(dòng)畫等

效果圖：

實(shí)現(xiàn)代碼

html:

css:

在線咨詢