作者|codingbit74 排版|小丑
html部分
<div class="middle">
<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>
css部分主要使用了css3
中的animation
和transform
属性。transform
属性允许我们对元素进行旋转、缩放、移动或倾斜
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background: #000;
}
.middle{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
.bar{
width: 10px;
height: 70px;
background: #fff;
display: inline-block;
transform-origin: bottom center;
border-top-left-radius:20% ;
border-top-right-radius:20%;
animation: loader 1.2s linear 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 loader {
0%{
transform: scaleY(0.1);
background: #fff;
}
50%{
transform: scaleY(1);
background: yellowgreen;
}
100%{
transform: scaleY(0.1);
background: transparent;
}
}