CSS3之碰撞反弹动画无限运动

示例代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3 碰撞反弹动画无限运动</title>
 6     <style type="text/css">
 7     .container {
 8         width: 600px;
 9         height: 400px;
10         border: 1px solid #333;
11         position: relative;
12     }
13     .ball {
14         position: absolute;
15         left: 0;
16         top: 0;
17         width: 20px;
18         height: 20px;
19         border-radius: 20px;
20         border: 1px solid #999;
21         /* alternate：动画先正常运行再反方向运行，并持续交替运行 */
22         animation: horizontal 10s linear 0s infinite alternate, vertical 6s linear 0s infinite alternate;
23     }
24     @keyframes horizontal {
25         0% {
26             left: 0;
27         }
28         100% {
29             /* 运动最大距离为盒子长度减去球的长度 */
30             left: calc(600px - 20px);
31         }
32     }
33     @keyframes vertical {
34         0% {
35             top: 0;
36         }
37         100% {
38             /* 运动最大距离为盒子高度减去球的高度 */
39             top: calc(400px - 20px);
40         }
41     }
42     </style>
43 </head>
44 <body>
45 <div class="container">
46     <div class="ball"></div>
47 </div>
48 </body>
49 </html>

 

该效果可以通过JS随机设置运动时间，衍生出无数小球随机碰撞动画，也能用于雪花飞舞效果。

巧妙的使用css3的animate属性，可以实现各种炫丽效果。

posted @ 2017-09-21 16:55  极·简  Views(4481)  Comments(0)  Edit  收藏  举报