Home > Developer > Web Develop
The sample code is as follows:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>CSS3 Collision Bounce Animation Infinite Motion</title>6 <styletype= "Text/css">7 . Container{8 width:600px;9 Height:400px;Ten Border:1px solid #333; One position:relative; A } - . Ball{ - position:Absolute; the Left:0; - Top:0; - width:20px; - Height:20px; + Border-radius:20px; - Border:1px solid #999; + /*Alternate: Animation runs normally and then runs in opposite directions and runs continuously alternately*/ A Animation:horizontal 10s linear 0s infinite alternate, vertical 6s linear 0s infinite alternate; at } - @keyframes Horizontal{ - 0% { - Left:0; - } - 100%{ in /*The maximum distance of the movement is the length of the box minus the ball*/ - Left:Calc (600px-20px); to } + } - @keyframes Vertical{ the 0% { * Top:0; $ }Panax Notoginseng 100%{ - /*The maximum distance of motion is the height of the box minus the ball.*/ the Top:Calc (400px-20px); + } A } the </style> + </Head> - <Body> $ <Divclass= "Container"> $ <Divclass= "Ball"></Div> - </Div> - </Body> the </HTML>
The effect can be randomly set the time of the motion by JS, the random collision of numerous small ball animation, can also be used for snow flying effect.
Clever use of CSS3 's animate properties allows for a variety of dazzling effects.
CSS3 's collision bounce animation Infinite Motion
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
