代码解读

 

　　定义dom，容器中包含10个子元素：

 

　　<divclass="loader">

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　</div>

 

　　居中显示：

 

　　body{

 

　　margin:0;

 

　　height:100vh;

 

　　display:flex;

 

　　align-items:center;

 

　　justify-content:center;

 

　　background:linear-gradient(#eee70%,pink);

 

　　}

 

　　设置容器的样式，是粉色背景并描边的一个圆：

 

　　.loader{

 

　　width:6em;

 

　　height:6em;

 

　　padding:3em;

 

　　font-size:10px;

 

　　background-color:pink;

 

　　border-radius:50%;

 

　　border:0.8emsolidhotpink;

 

　　}

 

　　设置子元素的布局方式为横向平铺：

 

　　.loader{

 

　　display:flex;

 

　　align-items:center;

 

　　justify-content:space-between;

 

　　}

 

　　设置子元素的样式：

 

　　.loader>span{

 

　　width:0.5em;

 

　　height:50%;

 

　　background-color:deeppink;

 

　　}

 

　　增加子元素的动画效果：

 

　　

 

　　.loader>span{

 

　　transform:scaleY(0.05)translateX(-0.5em);

 

　　animation:span-animate1.5sinfiniteease-in-out;

 

　　}

 

　　@keyframesspan-animate{

 

　　0%,100%{

 

　　transform:scaleY(0.05)translateX(-0.5em);

 

　　}

 

　　15%{

 

　　transform:scaleY(1.2)translateX(1em);

 

　　}

 

　　90%,100%{

 

　　background-color:hotpink;

 

　　}

 

　　}

 

　　设置子元素下标，让子元素依次播放动画：

 

　　.loader>span{

 

　　animation-delay:calc(var(--n)*0.05s);

 

　　}

 

　　.loader>span:nth-child(1){--n:1;}

 

　　.loader>span:nth-child(2){--n:2;}

 

　　.loader>span:nth-child(3){--n:3;}

 

　　.loader>span:nth-child(4){--n:4;}

 

　　.loader>span:nth-child(5){--n:5;}

 

　　.loader>span:nth-child(6){--n:6;}

 

　　.loader>span:nth-child(7){--n:7;}

 

　　.loader>span:nth-child(8){--n:8;}

 

　　.loader>span:nth-child(9){--n:9;}

 

　　.loader>span:nth-child(10){--n:10;}

 

　　增加容器动画，加强脉动的效果：

 

　　.loader{

 

　　animation:loader-animate1.5sinfiniteease-in-out;

 

　　}

 

　　@keyframesloader-animate{

 

　　45%,55%{

 

　　transform:scale(1.05);

 

　　}

 

　　}