尘叶心繁

音乐加载条

电脑版发表于: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;
}
}

如有侵权,请留言!!!

关于TNBLOG
TNBLOG,技术分享
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢