An example of the effect of CSS animation on the impact of ball wall bounce

The ball usually bounces after hitting a wall, and the reflective angle = angle of incidence;

Actually using CSS3 to achieve this effect is also very simple.

First, break down the motion of the ball: horizontal motion and vertical motion.

When the ball moves to the lower right, if it touches the wall below, the ball is subjected to a force perpendicular to the wall (i.e. upward force) because of the collision, so that the horizontal movement is unaffected and only the vertical movement is affected. So in the collision with the upper and lower walls only need to change the direction of movement, left and right motion, and so on, when the ball and the left and right side of the collision, just change the direction of horizontal motion, vertical direction without change.

With this idea, you can start to use CSS3 animation to achieve this small ball collision when the rebound.

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

The color of the ball uses the radial gradient inside the CSS3 to make the ball look more stereoscopic.