css動畫之小球撞壁反彈效果的實現實例

小球碰到一面壁之後一般都會反彈，反射角=入射角；

#其實用css3來實現這個效果也非常簡單。

首先，分解一下小球的移動：水平運動和垂直運動。

當小球往右下方向運動時，如果碰到了下面的壁，那麼由於碰撞，小球受到了垂直於牆壁的力（即向上的力），這樣的話水平運動是不會受到影響的，只有垂直運動受到了影響。所以在與上下壁碰撞時只需改變上下運動的方向，左右運動不變；以此類推，當小球與左右壁相碰撞時，只需改變水平運動的方向，垂直方向無需改動。

有了這個思路，就可以開始用css3動畫來實現這個小球碰撞時反彈了。

1.html:

1 <p id="box">
2       <p id="ball-box">
3            <p id="ball"></p>
4       </p>
5 </p>

2.css:

#box {
    width: 300px;
    height: 150px;
    border: 1px solid #7aa4c0;
}
#ball-box {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    animation: bouncey linear 3s infinite;
    -webkit-animation: bouncey linear 3s infinite;
}
#ball {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: -webkit-radial-gradient(circle, #ddecee, #0377db);
    background: -o-radial-gradient(circle, #ddecee, #0377db); 
    background: -moz-radial-gradient(circle, #ddecee, #0377db); 
    background: radial-gradient(circle, #ddecee, #0377db); 
    animation: bouncex linear 5s infinite;
    -webkit-animation: bouncex linear 3s infinite;
}
@keyframes bouncey
{
    0%,100% {
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
        }
    50% {
        transform:translateY(130px);
        -webkit-transform:translateY(130px);
        }
}
@keyframes bouncex
{
    0%,100% {
        transform:translateX(0px);
        -webkit-transform:translateX(0px);
        }
    50% {
        transform:translateX(280px);
        -webkit-transform:translateX(280px);
        }
}

css Code

小球的顏色利用css3裡面的徑向漸變，使小球看起來更有立體視覺感受。

以上是css動畫之小球撞壁反彈效果的實現實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！