源代码下载

    https://github.com/comehope/front-end-daily-challenges

    代码解读

    定义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);

    }

    }

    大功告成！