原

音乐加载条

5094人阅读 2019/4/12 12:24 总访问：3467477 评论：0 收藏：0 手机

分类: 前端

（静态图）效果：

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;
}
}