快捷導(dǎo)航

純js和css實(shí)現(xiàn)漸變色包括靜態(tài)漸變和動(dòng)態(tài)漸變

更新時(shí)間：2014年05月29日 15:40:29 作者：

用javascript實(shí)現(xiàn)一下所謂的動(dòng)態(tài)漸變，考慮動(dòng)態(tài)原因就不上圖了，我來(lái)簡(jiǎn)單介紹下思路

說(shuō)起“漸變色”，你會(huì)想起什么？

當(dāng)我開始搜索查找這個(gè)名詞的時(shí)候，才發(fā)現(xiàn)它實(shí)際上是有兩種理解或者說(shuō)是兩種形式的：動(dòng)態(tài)漸變和靜態(tài)漸變。

所謂動(dòng)態(tài)漸變，舉個(gè)簡(jiǎn)單的例子：他來(lái)了，她的臉漸漸紅了...漸漸的，漸漸改變的，是不斷在改變的；而靜態(tài)漸變，也就更簡(jiǎn)單了：天上一到彩虹，赤橙黃綠青藍(lán)紫啊...在當(dāng)前展示的成品中，顏色從一部分到另一部分的顏色是不一樣的，可能幅度比較小，是逐漸改變的，但有一點(diǎn)是至關(guān)重要的，它已經(jīng)存在了，形成了變化的現(xiàn)狀且無(wú)法再改變。

這樣我們先來(lái)用javascript實(shí)現(xiàn)一下所謂的動(dòng)態(tài)漸變，考慮動(dòng)態(tài)原因就不上圖了，我來(lái)簡(jiǎn)單介紹下思路：

* 動(dòng)態(tài)漸變

復(fù)制代碼代碼如下:

 
<span style="font-size:12px;"><html> 
... 
<body> 
<center> 
<div id="fade" style="width:600px;height:200px;"></div> 
</center> 
</body> 
</html></span> 

為了方便查看，我寫的是內(nèi)嵌樣式，還是推薦使用外鏈樣式的使用啊，接下來(lái)進(jìn)行簡(jiǎn)單編寫動(dòng)態(tài)實(shí)現(xiàn)漸變效果：

復(fù)制代碼代碼如下:

 
<span style="font-size:12px;"><script type="text/javascript"> 
var node=document.getElementById("fade"); 
var color="#0000"; 
var level=1; 

window.load=function fading(){ 
node.style.background=color.+level.toString()+level.toString(); 
level++; 
if(level>16){ 
clearTimeOut(fading); 
}else{ 
setTimeOut(fading,300); 
} 
} 
<script></span> 

這樣看來(lái)我不用多說(shuō)了吧，就一個(gè)拼接和一個(gè)重復(fù)調(diào)用的問(wèn)題。

* 靜態(tài)漸變

先來(lái)附圖，大家看看效果，大體明白神馬意思。

在不考慮兼容的前提下，額，真改研究下兼容了，這弄界面不考慮兼容有點(diǎn)缺啊，好吧，先這樣繼續(xù)說(shuō)，我是用的webkit內(nèi)核，就先用這個(gè)來(lái)介紹

在css樣式中添加：

background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));

簡(jiǎn)單解釋下：

linear：這個(gè)就碰到了線性漸變和徑向漸變的兩個(gè)概念，無(wú)非是在一條線上進(jìn)行變化的線性和像圓一樣向四周擴(kuò)散的徑向；

后面的四個(gè)值：分別代表相應(yīng)方向的px值，可以從左順時(shí)針轉(zhuǎn)的順序記憶，但是它代表的是to，截止到的顏色

from：這就是開始的顏色了

to：和from是同時(shí)出現(xiàn)的，最后漸變結(jié)束的顏色

而color-stop：則是指在變化到線的哪個(gè)位置的時(shí)候會(huì)出現(xiàn)什么顏色，當(dāng)然是從周圍過(guò)渡過(guò)去的，相當(dāng)于from，to過(guò)渡點(diǎn)，from過(guò)渡點(diǎn)，to；

好了，這樣就明白多了吧，附送下簡(jiǎn)單的其他的基本代碼

復(fù)制代碼代碼如下:

 
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/ 
background:-moz-linear-gradient(left,#ffffff,#ff0000);/*非IE6的其它*/ 
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));/*非IE6的其它*/ 

今天看了一集《開講了》，原來(lái)還有這么好看的節(jié)目，太lower了么我....

您可能感興趣的文章: