CSS realizes the animation effect of the parabolic movement of the ball (code)

The content this article brings to you is about the animation effect (code) of realizing the parabolic motion of the ball with CSS. It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

When an object realizes parabolic motion, physically it is divided into horizontal motion (uniform speed) and vertical motion (acceleration); the same principle is used to implement it with css3. Using this element requires two layers, one One layer controls the horizontal, and one layer controls the vertical; in CSS3, the speed can be set through the Bezier curve of transition or animation-timing-function. The slope of the Bezier curve is the speed of the object's movement, so different settings are set for vertical movement. Bessel's formula can be used to obtain various curved motions such as upward throwing, flat throwing, and twisting.

Mainly implement the following html part with two layers of divs, one to control horizontal movement and one to control vertical movement

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

It is also relatively simple in css. Directly set horizontal and vertical movement animations and animate them. The settings

    *{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); }
    }

mainly use the Bezier curve slope, which is the movement speed of the object. Various curve movements can be drawn according to different slopes

Related recommendations:

html5 simulates flat throwing motion (simulating the flat throwing motion process of a small ball)_html5 tutorial skills

How to use pure CSS to achieve an hourglass animation effect

The above is the detailed content of CSS realizes the animation effect of the parabolic movement of the ball (code). For more information, please follow other related articles on the PHP Chinese website!