骨架屏

原生css实现： *{ margin: 0; padding: 0; } :root { --loading:#ccc; } .card{ width: 200px; min-height: 400px; } .card img{ width: 100%; } .card h6{ font-size: 18px; line-height: 30px; } .card p{ line-height: 20px; font-size: 14px; }

.loading .img{ width: 100%; min-height: 260px; background-color: var(--loading); background: linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 60%) var(--loading); background-size: 200% 100%; background-position-x: 180%; animation: 1s loading ease-in-out infinite; } .loading h6{ width: 100%; min-height: 26px; background-color: var(--loading); margin:10px 0; background: linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 60%) var(--loading); background-size: 200% 100%; background-position-x: 180%; animation: 1s loading ease-in-out infinite; animation-delay: 0.05s; } .loading p{ width: 100%; min-height: 40px; background-color: var(--loading); background: linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 60%) var(--loading); background-size: 200% 100%; background-position-x: 180%; animation: 1s loading ease-in-out infinite; animation-delay: 0.06s; }

@keyframes loading { to{ background-position-x: -20%; } }

.card{ display: none; } .loading{ display: block; }

<div class="card">
   <img src="" alt="">
        <h6>标题标题标题标题标题</h6>
        <p>内容内容内容内容内容内容内容内容内容</p>
</div>
    
<div class="card loading">
    <div class="img"></div>
    <h6></h6>
    <p></p>
</div>

 <script>
var style = document.createElement('style');
setTimeout(() => {
    style.innerHTML = `
        .card{
            display:block;
        }
        .loading{
            display:none;
        }
    `
    document.body.appendChild(style);
}, 2000)
 </script>