首頁 > web前端 > js教程 > 純js和css實作漸層色包括靜態漸層和動態漸層_javascript技巧

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

WBOY
發布: 2016-05-16 16:46:26
原創
1428 人瀏覽過

說起“漸變色”,你會想起什麼?

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

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

這樣我們先來用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>
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板