示例代码如下：
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属性，可以实现各种炫丽效果。
时间： 2024-12-13 01:02:00