【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 4 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

CSS3 旋轉三角形

CSS 透過 border 樣式設定可以描繪三角形,再經由 transform 屬性的設定即可旋轉所建立的三角型效果如下:


首先配置一個 div 元素命名為triangle ,並且設定樣式如下:

<style>
        #triangle {
            width: 0;
            height: 0;          
            border-right:100px solid transparent ;
            border-left:100px solid transparent;
            border-bottom: 100px solid blue;
            transition: all 100ms ;          
        }    
    </style>

其中的 border-right、 border-left 與 border-bottom 組合出所需的三角形,transition 轉場設定讓旋轉的效果比較流暢。撰寫以下的程式碼設定 Transform 樣式以進行旋轉:

    <script> 
        var angle = 0; 
        function rotate() {
            document.getElementById('triangle').style.WebkitTransform = 
                'rotate(' + angle + 'deg)';
            document.getElementById('triangle').style.MozTransform =
                'rotate(' + angle + 'deg)';
            document.getElementById('triangle').style.msTransform =
                 'rotate(' + angle + 'deg)';
            angle += 2;
        } 
        setInterval(rotate, 100); 
    </script>

為了相容 IE、FF與Chrome ,因此分別指定字首重複設定三次,最後經由 setInterval() 調用啟動轉換效果。






沒有留言: