CSS特效---跳动的文字

news2025/11/9 13:18:58

1、演示

2、一切尽在代码中

<!--
 * @Author: your name
 * @Date: 2023-10-03 14:42:44
 * @LastEditTime: 2023-10-03 14:56:26
 * @LastEditors: DESKTOP-536UVPC
 * @Description: In User Settings Edit
 * @FilePath: \css-special-effects\跳动的文字.html
-->
<!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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1598353.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！