Skeleton Loading 骨架图

Posted stefzi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Skeleton Loading 骨架图相关的知识，希望对你有一定的参考价值。

<!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 骨架图的主要内容，如果未能解决你的问题，请参考以下文章

网页预加载_骨架屏Skeleton Screen的实现

skeleton是啥意思

Vue页面显示骨架屏

vue-skeleton-webpack-plugin骨架屏

52、vue-skeleton-webpack-plugin骨架屏

skeleton是啥意思中文