使用 CSS 实现打字效果

你可能已经见过一些网站上有打字动画。看起来很酷吧？但如果我告诉你，这其实很容易实现，而且只用 CSS 就能做到，不用 JS 就行。

首先，让我们想象一下我在说什么——

预览

现在让我们看看代码，我们如何实现这一点

HTML



<h1 class="typing">You had me at 'hello'.</h1>

HTML 非常简单，我们只需要使用一个元素即可完成这项工作。

CSS



/* Typing Class */
.typing {
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0.15em;
  border-right: 0.15em solid orangered;
  animation: typing 3.5s steps(40, end) infinite,
             cursor-blink 0.75s step-end infinite;
}

/* The typing effect for the text */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* The cursor  blinking effect */
@keyframes cursor-blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orangered;
  }
}

结论

就是这么简单，现在你可以在项目中的任何地方使用它了。你也可以用 JS 来实现，不过那是另一个故事了。

现在您可以通过给我买一杯咖啡来表示您的支持。😊👇

另请阅读

文章来源：https://dev.to/j471n/typing-effect-by-using-css-50p