码迷,mamicode.com
首页 > 其他好文 > 详细

Skeleton Loading 骨架图

时间:2020-06-22 01:37:45      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:name   viewport   type   meta   ati   add   oct   content   init   

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>skeleton-loading</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background: linear-gradient(
          90deg,
          #f2f2f2 25%,
          #e6e6e6 37%,
          #f2f2f2 63%
        );
        background-size: 400% 100%;
        background-position: 100%;
        animation: skeleton-loading 1s ease infinite;
      }

      @keyframes skeleton-loading {
        0% {
          background-position: 100%;
        }
        100% {
          background-position: 0;
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

 

Skeleton Loading 骨架图

标签:name   viewport   type   meta   ati   add   oct   content   init   

原文地址:https://www.cnblogs.com/stefzi/p/13174891.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!