純js和css實作漸層色包括靜態漸層和動態漸層_javascript技巧

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

當我開始搜尋尋找這個名詞的時候，才發現它其實是有兩種理解或兩種形式的：動態漸層和靜態漸層。

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

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

* 動態漸變

複製程式碼 程式碼如下:

...

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

複製程式碼

程式碼如下:

程式碼如下:

}
<script> <br><br> <br>這樣看來我不用多說了吧，就一個拼接和一個重複調用的問題。 <br><BR>* 靜態漸變 <IMG src="http://files.jb51.net/file_images/article/201405/201405291541275.gif?2014429154143"><BR>先來附圖，大家看看效果，大體明白神馬意思。 <br><br> <br>在不考慮兼容的前提下，額，真改研究下兼容了，這弄界面不考慮兼容有點缺啊，好吧，先這樣繼續說，我是用的webkit內核，就先用這個來介紹<br><br>在css樣式中加入： <br><br>background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffffff), color-stop(0.5,#0000ff),to(#ffffff)); <br><br>簡單解釋下： <br><br>linear：這就碰到了線性漸變和徑向漸變的兩個概念，無非是在一條線上進行變化的線性和像圓一樣向四周擴散的徑向； <br><br>後面的四個值：分別代表相應方向的px值，可以從左順時針轉的順序記憶，但是它代表的是to，截止到的顏色<br><br>from：這就是開始的顏色了<br><br>to：和from是同時出現的，最後漸變結束的顏色<br><BR>而color-stop：則是指在變化到線的哪個位置的時候會出現什麼顏色，當然是從周圍過渡過去的，相當於from，to過渡點，from過渡點，to; <div class="codetitle"><span>好了，這樣就明白多了吧，附送下簡單的其他的基本代碼<a style="CURSOR: pointer" data="4796" class="copybut" id="copybut4796" onclick="doCopy('code4796')"><U>複製代碼<div class="codebody" id="code4796"><BR> 代碼如下:<BR><BR> <BR>FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/ background:-moz(line) left,#ffffff,#ff0000);/*非IE6的其它*/ <BR>background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff) );/*非IE6的其它*/ <🎜><🎜> <🎜>今天看了一集《開講了》，原來還有這麼好看的節目，太lower了麼我....</script>