.chiaroscuro {
    background: #f2f2f2;
    animation-duration: 1.5s;
    animation-name: blink;
    animation-iteration-count: infinite;
}

@keyframes blink {
    0% {
        opacity: .4;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: .4;
    }
}

@keyframes flush {
    0% {
        left: -100%;
    }

    50% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}

使用时添加上类名chiaroscuro，动画时间duration及线条框背景颜色自己可以调整

骨架屏css样式 随笔

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄