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>
效果图：
