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 중국어 웹사이트의 기타 관련 기사를 참조하세요!