CSS3之碰撞反彈動畫無限運動

時間 2019-11-25

標籤 css3 css 碰撞反彈動畫無限運動欄目 CSS 简体版

原文原文鏈接

示例代碼以下：css

 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隨機設置運動時間，衍生出無數小球隨機碰撞動畫，也能用於雪花飛舞效果。html

巧妙的使用css3的animate屬性，能夠實現各類炫麗效果。css3

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。