【css】实现基础骨架屏

作为一种常用的网页加载动画，其实用css 就能实现

首先我们写出一个常见的卡片样式，带有图片和文字

<div class="card">
    <div class="image">
      <img
        src="https://static01.imgkr.com/temp/61662c2152164a8fa8b808398aa26bcb.jpg"
        alt=""
     />
      </div>
      <div class="content">
        <h4>Compiler Explorer</h4>
        <div class="description">
          是一个可以在浏览器里进行互动的编译工具。支持C、C++、Rust、Go、D、Haskell、Swift、Pascal或其他语言的代码，并能查看这些代码被实时编译的情况。
        </div>
      </div>
  </div>

接着需要copy上面的html框架并加上loading类，实现下图结构
1.清除里面的文字和图片内容；2.调整内容区域的高度

在此基础上，还需要用css动画实现白色光影，从左至右加一个滑动效果

📌需要注意一点是，下方的两块区域，因为相对于上面image，水平方向有偏移，可以设置一个animation-delay， 让整体看起来，像是一条光影造成的滑动，最终效果如图

📎 点击查看完整demo代码（vue）