ボールが壁に当たって跳ね返る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 中国語 Web サイトの他の関連記事を参照してください。