如何使用CSS创建打字机效应？

使用CSS创建打字机效果的核心是通过动画控制元素宽度并隐藏溢出内容，结合overflow: hidden、border-right作为光标、white-space: nowrap保持单行，以及animation实现打字和光标闪烁效果；2. 关键自定义点包括调整animation-duration以匹配文本长度，使用steps()函数设置步数（通常等于字符数），可选单等宽字体增强效果，并可自定义光标样式；3. 响应式设计中建议设置width: fit-content和max-width: 100%以适配不同屏幕；4. 该方法仅适用于单行文本，动画需手动调参，长文本建议改用JavaScript。此方案无需JavaScript，兼容现代浏览器，性能良好且实现简单。

Creating a typewriter effect with CSS is a simple and effective way to add a dynamic, retro feel to your text — all without JavaScript. This effect simulates text being typed out character by character, usually with a blinking cursor. Here's how to do it:

1. Use animation with width and overflow

The core idea is to gradually reveal the text by animating the width of an element while hiding the overflow. This gives the illusion that the text is being typed in real time.

HTML:

<h1 class="typewriter">Hello, world!</h1>

CSS:

.typewriter {
  /* Set up the container */
  overflow: hidden; /* Prevents text from overflowing */
  border-right: 0.15em solid black; /* The typewriter cursor */
  white-space: nowrap; /* Keeps text on a single line */
  margin: 0 auto; /* Center the text */
  letter-spacing: 0.15em; /* Optional: adds spacing between characters */
  animation: 
    typing 3.5s steps(30, end) forwards, /* Typing animation */
    blink-caret 0.75s step-end infinite; /* Blinking cursor */
}

/* Simulate typing: expand width from 0 to full */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* Blinking cursor animation */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black }
}

2. Key Points to Customize

• Animation duration: Adjust 3.5s in typing to match the length of your text. Longer text may need longer duration.
• Steps() function: The steps(30, end) breaks the animation into 30 discrete steps — roughly one per character. You can tweak this number based on your text length.
• Font and size: The effect works with any font, but monospace fonts (like Courier) enhance the typewriter feel.
• Cursor style: Change border-right color, width, or even use ::after for a custom caret.

Optional: Monospace font

.typewriter {
  font-family: 'Courier New', monospace;
}

3. Make it Responsive (Optional)

If you're using this on different screen sizes, you might want to set a fixed width or use max-width to avoid issues with width: 100% on flexible containers.

.typewriter {
  width: fit-content;
  max-width: 100%;
  animation: typing 3.5s steps(30, end) forwards,
             blink-caret 0.75s step-end infinite;
}

4. Limitations

• Only works well with single-line text (due to white-space: nowrap).
• Animation timing needs manual adjustment for different text lengths.
• Not ideal for long paragraphs — consider JavaScript for more control.

That’s it. With just a few CSS lines, you get a clean, performant typewriter effect. No JavaScript needed, and it works across modern browsers.

以上是如何使用CSS创建打字机效应？的详细内容。更多信息请关注PHP中文网其他相关文章！