小程序 通过 css 实现骨架屏

• gif
  

• html

  <view class="skeleton-wrapper">
    <view class="skeleton-header skeleton-bg"></view>
    <view class="skeleton-banner skeleton-bg"></view>
    <view class="skeleton-content">
      <view class="skeleton-theme-votetitle">
        <view class="skeleton-theme-status skeleton-bg"></view>
        <view class="skeleton-theme-title skeleton-bg"></view>
      </view>
      <view class="skeleton-theme-content skeleton-bg"></view>
      <view class="skeleton-theme-date skeleton-bg"></view>
      <view class="skeleton-theme-date skeleton-bg"></view>
      <view class="skeleton-theme-date skeleton-bg"></view>
      <view class="skeleton-theme-pr skeleton-bg"></view>
      <view class="skeleton-btn">
        <view class="skeleton-footer-btn skeleton-bg"></view>
        <view class="skeleton-footer-btn skeleton-bg"></view>
      </view>
      <view class="skeleton-comment-title skeleton-bg"></view>
      <view class="skeleton-comment-item skeleton-bg">
        <view class="skeleton-comment-msg">
          <view class="skeleton-comment-avatar skeleton-darkbg"></view>
          <view class="skeleton-comment-info">
            <view class="skeleton-comment-nickname skeleton-darkbg"></view>
            <view class="skeleton-comment-nickname skeleton-darkbg"> </view>
          </view>
        </view>
        <view class="skeleton-comment-result skeleton-darkbg"></view>
        <view class="skeleton-comment-leavewords skeleton-darkbg"></view>
      </view>
      <view class="skeleton-fixed-function">
        <view class="skeleton-fixed-btn">
          <view class="skeleton-btn-icon skeleton-bg"></view>
          <view class="skeleton-btn-text skeleton-bg"></view>
        </view>
        <view class="skeleton-fixed-btn">
          <view class="skeleton-btn-icon skeleton-bg"></view>
          <view class="skeleton-btn-text skeleton-bg"></view>
        </view>
        <view class="skeleton-fixed-btn">
          <view class="skeleton-btn-icon skeleton-bg"></view>
          <view class="skeleton-btn-text skeleton-bg"></view>
        </view>
      </view>
    </view>
  </view>

• css

// 骨架屏
.skeleton-wrapper {
  height: 100vh;
  pointer-events: none;
  padding: 15rpx 0rpx;
  overflow: hidden;
  .skeleton-content {
    padding: 0 30rpx;
  }


  @keyframes skeleton-stretch {
    0% {
      background-position: 100% 50%;
    }
    to {
      background-position: 0 50%;
    }
  }

  .skeleton-loading {
    // animation: skeleton-stretch 0.5s linear infinite alternate;
    overflow: hidden;
    position: relative;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      animation: skeleton-stretch 1.4s ease infinite;
      background-image: -webkit-gradient(linear, left top, right top, color-stop(25%, #f0f0f0), color-stop(37%, #e3e3e3), color-stop(63%, #f0f0f0));
      background-image: -o-linear-gradient(left, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%);
      background-image: linear-gradient(90deg, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%);
      background-size: 400% 100%;
      z-index: 99;
      display: block;
    }
  }
  .skeleton-bg {
    background: #f5f5f5;
    @extend .skeleton-loading;
  }
  .skeleton-darkbg {
    background: #f6f6f6;
    @extend .skeleton-loading;
  }
  .skeleton-header {
    height: 50rpx;
    width: 50%;
    padding: 0 30rpx;
  }
  .skeleton-banner {
    height: 435rpx;
    margin-top: 20rpx;
  }
  .skeleton-theme-votetitle {
    margin: 60rpx 0 30rpx 0;
    height: 50rpx;
    display: flex;
    .skeleton-theme-status {
      width: 80rpx;
      margin-right: 15rpx;
    }
    .skeleton-theme-title {
      flex: 1;
    }
  }
  .skeleton-theme-content {
    height: 120rpx;
    margin-bottom: 30rpx;
  }
  .skeleton-theme-date {
    height: 35rpx;
    width: 300rpx;
    margin-bottom: 10rpx;
  }
  .skeleton-theme-pr {
    height: 50rpx;
    margin: 50rpx 0rpx;
  }
  .skeleton-btn {
    display: flex;
    justify-content: space-around;
    .skeleton-footer-btn {
      height: 150rpx;
      width: 300rpx;
    }
  }
  .skeleton-comment-title {
    margin-top: 60rpx;
    margin-bottom: 40rpx;
    width: 300rpx;
    height: 50rpx;
  }
  .skeleton-comment-item {
    padding: 30rpx;
    .skeleton-comment-msg {
      display: flex;
      .skeleton-comment-avatar {
        width: 78rpx;
        height: 78rpx;
        margin-right: 20rpx;
        background: #dfdfdf;
        border-radius: 50%;
      }
      .skeleton-comment-nickname {
        margin-top: 8rpx;
        width: 200rpx;
        height: 30rpx;
      }
    }
    .skeleton-comment-result {
      height: 50rpx;
      width: 80%;
      margin-top: 30rpx;
      margin-bottom: 30rpx;
    }
    .skeleton-comment-leavewords {
      height: 100rpx;
    }
  }
  .skeleton-fixed-function {
    display: flex;
    position: fixed;
    padding-top: 15rpx;
    bottom: 0;
    z-index: 1000;
    left: 0;
    right: 0;
    background: #fff;
    height: 120rpx;
    .skeleton-fixed-btn {
      flex: 1;
      .skeleton-btn-icon {
        width: 80rpx;
        height: 50rpx;
        margin: 0 auto 10rpx auto;
      }
      .skeleton-btn-text {
        width: 120rpx;
        height: 40rpx;
        margin: 0 auto;
      }
    }
  }
}

关键代码： animation 动画