CSS 透過 border 樣式設定可以描繪三角形,再經由 transform 屬性的設定即可旋轉所建立的三角型效果如下:
首先配置一個 div 元素命名為triangle ,並且設定樣式如下:
其中的 border-right、 border-left 與 border-bottom 組合出所需的三角形,transition 轉場設定讓旋轉的效果比較流暢。撰寫以下的程式碼設定 Transform 樣式以進行旋轉:
為了相容 IE、FF與Chrome ,因此分別指定字首重複設定三次,最後經由 setInterval() 調用啟動轉換效果。
首先配置一個 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() 調用啟動轉換效果。
沒有留言:
張貼留言