动态loading效果

最新推荐文章于 2023-09-20 18:08:42 发布

闪闪发光惹人爱~

最新推荐文章于 2023-09-20 18:08:42 发布

阅读量163

点赞数

分类专栏： CSS # loading 文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_43210656/article/details/130950710

版权

CSS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="./favicon.ico">
  <title><%= webpackConfig.name %></title>
  <style>
    .loading {
      height: 90vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .wavy {
      position: relative;
      -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
    }

    .wavy span {
      position: relative;
      display: inline-block;
      color: rgb(21, 144, 214);
      font-size: 50px;
      text-transform: uppercase;
      letter-spacing: 8px;
      /* 执行动画：动画名 时长 加速后减速 无限次播放 */
      animation: wavyAnimate 1s ease-in-out infinite;
      /* 通过var函数调用自定义属性--i，在计算出动画延迟时间 */
      animation-delay: calc(0.1s * var(--i));
    }

    @keyframes wavyAnimate {
      0% {
        transform: translateY(0);
      }

      20% {
        transform: translateY(-20px);
      }

      40%,
      100% {
        transform: translateY(0);
      }
    }

  </style>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it
      to continue.</strong>
  </noscript>
  <div id="app">
    <div class="loading">
      <div class="wavy">
        <!-- --i是自定义属性，可通过var函数调用 -->
        <span style="--i:1;">l</span>
        <span style="--i:2;">o</span>
        <span style="--i:3;">a</span>
        <span style="--i:4;">d</span>
        <span style="--i:5;">i</span>
        <span style="--i:6;">n</span>
        <span style="--i:7;">g</span>
        <span style="--i:8;">.</span>
        <span style="--i:9;">.</span>
        <span style="--i:10;">.</span>
      </div>
    </div>
  </div>
  <!-- built files will be auto injected -->
</body>

</html>