加载占位图 Skeleton Screen Loading
<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

真诚赞赏,手留余香
赞赏
随机推荐
JSON Web Token 简介和实现
MacOS launchctl 启动进程控制
ffmpeg 推送流到nginx服务器,生成m3u8 地址
Node.js 断言模块 Assert 模块
Wordpress 学习笔记 4 数据库操作
Centos 8 修改 ssh 默认端口
MYSQL导入数据出现The MySQL server is running with the --secure-file-priv
关于谷歌Material Design:你需要知道的一切
高并发 php uniqid 用md5生成不重复唯一标识符方案
Node.js Buffer(缓冲区)
QQ号

微信联系我

夜间模式切换
回到顶部