<view class="item">
 <view class="skeleton-image animated-background"></view>
 <view class="skeleton-right">
  <view class="title animated-background"></view>
  <view class="description animated-background"></view>
 </view>
</view>

.item{
  width: 700rpx;
  height: 100rpx;
  margin: 10rpx auto;
  display: flex;
  justify-content: space-between;
  .skeleton-image{
    width: 100rpx;
    height: 100rpx;
  }
  .skeleton-right{
    width: 580rpx;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .title{
      width: 100%;
      height: 30rpx;
    }
    .description{
      width: 100%;
      height: 50rpx;
    }
  }
}

@keyframes placeHolderShimmer {
  0% {background-position: -468px 0}
  100% {background-position: 468px 0}
}

.animated-background {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 40px;
  position: relative;
}

修改时间 2022-05-19