css实现简单音乐符效果
作者：互联网
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
效果图：
标签：box,alternate,run,效果,音乐,height,animation,span,css 来源： https://www.cnblogs.com/lanxiansen/p/11019356.html