音乐加载条
电脑版发表于：2019/4/12 12:24
（静态图）效果：
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="content"> <div class="bar bar1"></div> <div class="bar bar2"></div> <div class="bar bar3"></div> <div class="bar bar4"></div> <div class="bar bar5"></div> <div class="bar bar6"></div> <div class="bar bar7"></div> <div class="bar bar8"></div> </div> </body> </html>
需要创建一个style.css
css:
body{
padding: 0;
margin: 0;
background-color: black;
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,50%);
}
.bar{
width: 6px;
height: 36px;
display: inline-block;
background-color: white;
/* 运动方式 */
transform-origin: bottom center;
/* 运动方法 运动多少秒 不晓得 循环 */
animation: loading 1.5s ease-in-out infinite;
}
.bar1{
/* 不晓得 */
animation-delay: 0.1s;
}
.bar2{
animation-delay: 0.2s;
}
.bar3{
animation-delay: 0.3s;
}
.bar4{
animation-delay: 0.4s;
}
.bar5{
animation-delay: 0.5s;
}
.bar6{
animation-delay: 0.6s;
}
.bar7{
animation-delay: 0.7s;
}
.bar8{
animation-delay: 0.8s;
}
@keyframes loading{
0%{
/* 改变为自身高度的0.1 */
transform:scaleY(0.1);
background-color: #00b894;
}
50%{
transform: scaleY(1);
background-color: #55efc4;
}
100%{
transform: scaleY(0.1);
/* 变成父级颜色 */
background-color: transparent;
}
}如有侵权，请留言！！！
