kayn大魔王

导航

html5+css3实现一个简单波浪音节

1.html+css代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>波浪音节</title>
 8 
 9     <style>
10     
11     .mu{
12         width: 10px;
13         height: 20px;
14         background-color: thistle;
15         border-radius: 3px;
16         margin: 50px 3px;
17         float: left;
18     }
19     .mu1{
20         animation: bian 0.3s linear 0.8s infinite alternate;
21     }
22     .mu2{
23         animation: bian 0.3s linear 0.7s infinite alternate;
24     }
25     .mu3{
26         animation: bian 0.3s linear 0.6s infinite alternate;
27     }
28     .mu4{
29         animation: bian 0.3s linear 0.5s infinite alternate;
30     }
31     .mu5{
32         animation: bian 0.3s linear 0.4s infinite alternate;
33     }
34     .mu6{
35         animation: bian 0.3s linear 0.3s infinite alternate;
36     }
37     .mu7{
38         animation: bian 0.3s linear 0.2s infinite alternate;
39     }
40     .mu8{
41         animation: bian 0.3s linear 0.1s infinite alternate;
42     }
43     @keyframes bian{
44         0%{
45             transform: scale(1,1);
46             background-color: rgb(233, 216, 233);
47         }
48         100%{
49             transform:scale(1,4);
50             background-color: plum;
51         }
52     }
53     </style>
54 
55 </head>
56 <body>
57     <div class="mu mu1"></div>
58     <div class="mu mu2"></div>
59     <div class="mu mu3"></div>
60     <div class="mu mu4"></div>
61     <div class="mu mu5"></div>
62     <div class="mu mu6"></div>
63     <div class="mu mu7"></div>
64     <div class="mu mu8"></div>
65     <div class="mu mu7"></div>
66     <div class="mu mu6"></div>
67     <div class="mu mu5"></div>
68     <div class="mu mu4"></div>
69     <div class="mu mu3"></div>
70     <div class="mu mu2"></div>
71     <div class="mu mu1"></div>
72 </body>
73 </html>

2.效果图展示

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

posted on 2020-07-21 19:57  kayn大魔王  阅读(179)  评论(1)    收藏  举报