如何使用纯CSS实现类似脉动的loader

2024-01-17 13:53 小编
  源代码下载
    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);
    }
    }
    大功告成!


Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码