CSS는 공의 포물선 운동의 애니메이션 효과를 구현합니다(코드).

이 글의 내용은 공의 포물선 운동을 CSS로 구현하는 애니메이션 효과(코드)에 대한 내용입니다. 도움이 필요한 친구들이 참고하면 좋겠습니다.

객체는 포물선 운동을 구현합니다. 객체는 물리적으로 수평 운동(균일 속도)과 수직 운동(가속)으로 구분됩니다. 이 요소를 사용하려면 수평을 제어하는 ​​레이어와 하나의 레이어가 필요합니다. 레벨을 제어하려면 CSS3에서 베지어 곡선 전환이나 애니메이션 타이밍 기능을 통해 속도를 설정할 수 있습니다. 위로 던지기, 평평하게 던지기, 비틀기 등 다양한 곡선 동작을 얻을 수 있습니다.

다음 html 부분의 주요 구현은 주요 2레이어 div로, 하나는 수평 이동을 제어하고 다른 하나는 수직 이동을 제어합니다

    <div class="wraper">         <!--控制竖直运动-->
        <div class="item"></div> <!--控制水平运动-->
    </div>
    <div class="item2"></div>

또한 CSS에서 수평 및 수직 모션 애니메이션과 애니메이션 설정을 직접 설정하는 것이 상대적으로 간단합니다.

    *{margin: 0;padding: 0}  /*简单的浏览器兼容*/
    /*设置初始样式*/
    .item, .item2 {
        width:20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        top: 50px;
        left: 20px;
        background-color: #00aa00;
        border-radius: 50%;
    }
    /*竖直运动*/
    .wraper {
        animation: vertical-animation 2s  .5s 2;
        animation-timing-function: cubic-bezier(.11,-.33,.55,.11);
    }
    /*水平运动*/
    .wraper .item {
        animation: hor-animation 2s linear .5s 2;
    }
    @-moz-keyframes hor-animation {
        0% { transform: translateX(0px); }
        100% { transform: translateX(400px); }
    }
    @-webkit-keyframes hor-animation {
        0% { transform: translateX(0px);     }
        100% { transform: translateX(400px); }
    }
    @-moz-keyframes vertical-animation {
        0% { transform: translateY(0px);  }
        100% { transform: translateY(400px); }
    }
    @-webkit-keyframes vertical-animation {
        0% { transform: translateY(0px);     }
        100% { transform: translateY(400px); }
    }

주로 사용되는 베지어 곡선의 기울기는 물체의 속도에 따라 다양한 곡선의 움직임을 그릴 수 있습니다

관련 권장사항:

html5는 평평한 던지는 동작을 시뮬레이션합니다(평평한 던지는 동작 프로세스 시뮬레이션). 작은 공)_html5가지 튜토리얼 기술

순수한 CSS를 사용하여 모래시계 애니메이션 효과를 얻는 방법

위 내용은 CSS는 공의 포물선 운동의 애니메이션 효과를 구현합니다(코드).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!