CSS 漸層-設定漸層角度

CSS的漸層樣式支援相當複雜的層漸效果,你也可以透過角度的設定,改變漸層在網頁上呈現的方向,例如以下為預設的漸層:


這個漸層的樣式很簡單,設定如下:

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>






沒有留言: