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>