CSS的漸層樣式支援相當複雜的層漸效果,你也可以透過角度的設定,改變漸層在網頁上呈現的方向,例如以下為預設的漸層:
這個漸層的樣式很簡單,設定如下:
只要在參數列的最前方加上角度值就可以改變漸層的方向,例如以下的設定:
其中第一個參數 60deg 表示以60度的方向呈現漸層,結果如下:
利用此種特性,我們可以透過程式改變角度值,建立一個旋轉漸層動畫如下:
以下為所需的程式碼:
而此圓形所需的 div 配置如下:
這個漸層的樣式很簡單,設定如下:
background:-webkit-linear-gradient(red,blue);
只要在參數列的最前方加上角度值就可以改變漸層的方向,例如以下的設定:
background:-webkit-linear-gradient(60deg,red,blue);
其中第一個參數 60deg 表示以60度的方向呈現漸層,結果如下:
利用此種特性,我們可以透過程式改變角度值,建立一個旋轉漸層動畫如下:
以下為所需的程式碼:
<script>
var d = 0;
var red = 255;
var redb = false;
setInterval(changedeg, 1000/36);
function changedeg() {
document.getElementById('arear').style.backgroundImage =
'-webkit-linear-gradient(' + d + 'deg,rgb('+red+',0,0),rgb(0,0,255))';
d += 10;
if (d > 360) d = 0;
if (red <= 0) redb = true ;
if (red >= 255) redb = false;
if (redb == false)
red -= 2;
else
red += 2;
}
</script>
而此圓形所需的 div 配置如下:
<div id="arear" style="border-radius: 50%; height: 360px; width: 360px;">
</div>
沒有留言:
張貼留言