css实现简单音乐符效果

　　利用css3中的transform、animation、keyframes实现
 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>Document</title>
 8   <style>
 9     .box{
10       width:60px;
11       height:40px;
12       position:relative;
13       margin:100px auto;
14       transform:rotate(180deg);
15     }
16     .box span{
17       position:absolute;
18       background:lightblue;
19       width:10px;
20     }
21     .box span:nth-child(1){
22       height:50px;
23       left:0px;
24       animation:run 0.8s linear 0s infinite alternate;
25     }
26     .box span:nth-child(2){
27       height:50px;
28       left:15px;
29       animation:run 0.9s linear 0s infinite alternate;
30     }
31     .box span:nth-child(3){
32       height:50px;
33       left:30px;
34       animation:run 1s linear 0s infinite alternate;
35     }
36     .box span:nth-child(4){
37       height:50px;
38       left:45px;
39       animation:run 0.7s linear 0s infinite alternate;
40     }
41     .box span:nth-child(5){
42       height:50px;
43       left:60px;
44       animation:run 0.8s linear 0s infinite alternate;
45     }
46     @keyframes run{
47       10%{
48         height:20%;
49       }
50       20%{
51         height:40%;
52       }
53       40%{
54         height:60%;
55       }
56       70%{
57         height:80%
58       }
59       100%{
60         height:100%
61       }
62     }
63   </style>
64 </head>
65 <body>
66   <div class="box">
67     <span></span>
68     <span></span>
69     <span></span>
70     <span></span>
71     <span></span>
72   </div>
73 </body>
74 </html>
View Code
　　效果图：
原文地址：https://www.cnblogs.com/lanxiansen/p/11019356.html