Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

css 实现打字机效果【热度: 96】 #792

Open
yanlele opened this issue Jul 12, 2024 · 0 comments
Open

css 实现打字机效果【热度: 96】 #792

yanlele opened this issue Jul 12, 2024 · 0 comments
Labels
CSS CSS 相关问题 TOP100互联网 公司标签
Milestone
中

Comments

@yanlele
Copy link
Member

yanlele commented Jul 12, 2024

关键词：animation 帧动画、animation steps 属性

主要是对 css 动画的一个实际应用考察

以下是一个使用 CSS 实现简单打字机效果的示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .typewriter {
        width: 300px;
        border-right: 4px solid black;
        animation: typing 4s steps(30), blink 0.5s step-end infinite;
        white-space: nowrap;
        overflow: hidden;
      }

      @keyframes typing {
        from {
          width: 0;
        }
        to {
          width: 300px;
        }
      }

      @keyframes blink {
        50% {
          border-color: transparent;
        }
      }
    </style>
  </head>

  <body>
    <p class="typewriter">这是一个打字机效果的文本</p>
  </body>
</html>

在上述代码中，.typewriter 类的元素用于实现打字机效果。

animation: typing 4s steps(30), blink 0.5s step-end infinite; 定义了两个动画：

  • typing 动画用于模拟文字逐个出现的效果，从宽度为 0 逐渐增加到 300px，steps(30) 表示分 30 步完成动画，使文字出现有逐个显示的效果。

  • blink 动画用于模拟光标闪烁效果，每 0.5s 闪烁一次，在 50% 进度时，光标（通过右边框实现）变为透明来模拟闪烁。
@yanlele yanlele added CSS CSS 相关问题 TOP100互联网 公司标签 labels Jul 12, 2024
@yanlele yanlele added this to the 中 milestone Jul 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS CSS 相关问题 TOP100互联网 公司标签
Projects
None yet
Milestone
中
Development

No branches or pull requests
1 participant
@yanlele