Use CSS3 animation to simulate the effect of freely falling small balls and css3 freely falling into the body

Use CSS3 animation to simulate the effect of freely falling small balls and css3 freely falling into the body

Use pure CSS code to simulate the effect of freely falling into the ball:

The html code is as follows:

1 <div id="ballDiv">2 　　<div id="ball"></div>3 </div>

CSS style code:

/* Ball style */# ballDiv {height: 400px; background-color: #333333 ;}# ball {width: 100px; height: 100px; border-radius: 50%; background: -webkit-radial-gradient (center, circle, # fff, blue); box-shadow: 3px 7px 8px # ccc;-webkit-animation: ball 5S cubic-bezr (0.0, 0.25, 0.50, 1.0);-webkit-transform: translate (250px, 300px );} @-webkit-keyframes ball {0% {-webkit-transform: translate (0, 0);} 10% {-webkit-transform: translate (0, 330px); height: 70px;} 20% {-webkit-transform: translate (50px, 50px); height: 100px;} 30% {-webkit-transform: translate (50px, 330px); height: 70px;} 40% {-webkit-transform: translate (100px, 100px); height: 100px;} 50% {-webkit-transform: translate (100px, 320px); height: 80px;} 60% {-webkit-transform: translate (150px, 150px); height: 100px;} 70% {-webkit-transform: translate (150px, 320px); height: 80px;} 80% {-webkit-transform: translate (200px, 200px); height: 100px;} 90% {-webkit-transform: translate (200px, 300px); height: 100px;} 100% {-webkit-transform: translate (250px, 300px); height: 100px ;}}