CSS特效---跳动的文字

bbamx.

已于 2024-04-18 09:40:17 修改

阅读量190

点赞数 1

分类专栏： CSS特效合集文章标签： css 前端 javascript

于 2024-04-16 11:04:45 首次发布

本文链接：https://blog.csdn.net/nibabaoo/article/details/137817358

版权

CSS特效合集专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、演示

2、一切尽在代码中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跳动的文字</title>
  </head>

  <body>
    <div class="loading-box">
      <div class="loading-text">
        <span style="--i: 1">拼</span>
        <span style="--i: 2">命</span>
        <span style="--i: 3">加</span>
        <span style="--i: 4">载</span>
        <span style="--i: 5">中</span>
        <span style="--i: 6">.</span>
        <span style="--i: 7">.</span>
        <span style="--i: 8">.</span>
      </div>
    </div>
  </body>
  <style>
    body {
      margin: 0px;
    }

    .loading-box {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #42494ede;
    }

    .loading-text {
      color: #f0c6c6;
      font-size: 32px;
    }
    .loading-text span {
      display: inline-block;
      animation: up-down 1.5s ease-in-out infinite;
      animation-delay: calc(0.1s * var(--i));
    }
    @keyframes up-down {
      0% {
        transform: translateY(0px);
      }
      20% {
        transform: translateY(-24px);
      }
      40%,
      100% {
        transform: translateY(0px);
      }
    }
  </style>
</html>