类似懒加载
类似懒加载
clearloveing502 发表于1年前
类似懒加载
  • 发表于 1年前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dome</title> <style> body{ width:640px; margin:0 auto; background-color:#fff; } @keyframes placeHolderShimmer{ 0%{ background-position: -640px 0 } 100%{ background-position: 640px 0 } } .box { 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; position: relative; height:100vh; } [class^="box-"]{ position:absolute; background-color:#fff; } .box-bar-0{ left:60px; top:0; width:10px; height:50px; } .box-bar-1{ left:60px; top:0; width:calc(100% - 50px); height:20px; } .box-bar-2{ left:60px; top:calc(60px - 25px); width:calc(100% - 50px); height:20px; } .box-bar-3{ right: 0; top: 20px; width: 25%; height: 16px; } .box-bar-4{ left: 0; top: 50px; width: 100%; height: 16px; } .box-bar-5{ left: 110px; top: 66px; width: 20px; height: 132px; } .box-bar-6{ left: 110px; top: 86px; width: calc(100% - 110px); height: 10px; } .box-bar-7{ left: 220px; top: 98px; width: 300px; height: 10px; } .box-bar-8{ left: 110px; top: 110px; width: calc(100% - 110px); height: 48px; } .box-bar-9{ left: 272px; top: 166px; width: calc(100% - 110px); height: 12px; } .box-bar-10{ left: 272px; top: 184px; width: calc(100% - 110px); height: 12px; } </style> </head> <body> <div class="box"> <div class="box-bar-0"></div> <div class="box-bar-1"></div> <div class="box-bar-2"></div> <div class="box-bar-3"></div> <div class="box-bar-4"></div> <div class="box-bar-5"></div> <div class="box-bar-6"></div> <div class="box-bar-7"></div> <div class="box-bar-8"></div> <div class="box-bar-9"></div> <div class="box-bar-10"></div> </div> </body> </html>

共有 人打赏支持
粉丝 0
博文 10
码字总数 4926
×
clearloveing502
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: