純js和css實現漸變色包括靜態漸變和動態漸變

2019-11-20 15:01:09

字體：大中小

來源：轉載

供稿：網友

說起“漸變色”，你會想起什么？

當我開始搜索查找這個名詞的時候，才發現它實際上是有兩種理解或者說是兩種形式的：動態漸變和靜態漸變。

所謂動態漸變，舉個簡單的例子：他來了，她的臉漸漸紅了...漸漸的，漸漸改變的，是不斷在改變的；而靜態漸變，也就更簡單了：天上一到彩虹，赤橙黃綠青藍紫啊...在當前展示的成品中，顏色從一部分到另一部分的顏色是不一樣的，可能幅度比較小，是逐漸改變的，但有一點是至關重要的，它已經存在了，形成了變化的現狀且無法再改變。

這樣我們先來用javascript實現一下所謂的動態漸變，考慮動態原因就不上圖了，我來簡單介紹下思路：

* 動態漸變

復制代碼代碼如下:

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

為了方便查看，我寫的是內嵌樣式，還是推薦使用外鏈樣式的使用啊，接下來進行簡單編寫動態實現漸變效果：

復制代碼代碼如下:

 
<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> 

這樣看來我不用多說了吧，就一個拼接和一個重復調用的問題。

* 靜態漸變

先來附圖，大家看看效果，大體明白神馬意思。

在不考慮兼容的前提下，額，真改研究下兼容了，這弄界面不考慮兼容有點缺啊，好吧，先這樣繼續說，我是用的webkit內核，就先用這個來介紹

在css樣式中添加：

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

簡單解釋下：

linear：這個就碰到了線性漸變和徑向漸變的兩個概念，無非是在一條線上進行變化的線性和像圓一樣向四周擴散的徑向；

后面的四個值：分別代表相應方向的px值，可以從左順時針轉的順序記憶，但是它代表的是to，截止到的顏色

from：這就是開始的顏色了

to：和from是同時出現的，最后漸變結束的顏色

而color-stop：則是指在變化到線的哪個位置的時候會出現什么顏色，當然是從周圍過渡過去的，相當于from，to過渡點，from過渡點，to；

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

復制代碼代碼如下:

 
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的其它*/ 

今天看了一集《開講了》，原來還有這么好看的節目，太lower了么我....

上一篇：jquery緩動swing liner控制動畫過程不同時刻的速度

下一篇：js實現頁面跳轉重定向的幾種方式