CSS實作球體運動

**請使用 Firefox 或 Chrome

CSS支援的轉場效果,可以在位置屬性改變時,呈現動畫效果,利用這種特性,經由 setInterval() 方法可以實作出簡單的球體運動。



首先配置兩個 div :

    <div id="aball"></div>
    <div id="bball"></div>

接下來設定此兩組 div 元素樣式以模擬球體:

#aball {
width:300px;
height: 300px;
border-radius:50% ;       
position:absolute;          
background: -webkit-gradient(
linear,left top,center center,from(lightgray), to(#f7f7f7));
background-moz-linear-gradient(top, silver, #f7f7f7);
background-ms-linear-gradient(top, silver, #f7f7f7);
 transition:left 1500ms ;
left:0 ;
}

#bball {
width: 220px;
height: 220px;
border-radius: 50%;
position: absolute;
top: 40px;
left: 360px;
background: -webkit-gradient(
linear,left top,center center,from(silver), to(#f7f7f7));
background-moz-linear-gradient(top, silver, #f7f7f7);
background-ms-linear-gradient(top, silver, #f7f7f7);
}

其中設定轉場樣式 transition:left 1500ms ,並撰寫以下的 JavaScript :

<script>
    var left = false;
    function move() {
        left = !left;
        if (left) {
            document.getElementById('aball').style.left = '0px';
            document.getElementById('aball').style.zIndex = 1000;
        } else {
            document.getElementById('aball').style.left = '660px';
            document.getElementById('aball').style.zIndex = -1000;
        }
    }
    setInterval(move, 1500);
</script>

setInterval 每 1500 毫秒調整球體位置,並經由轉場樣式呈現動畫效果。




沒有留言: