使用CSS实现打字机效果

发布时间：2023-10-23 14:07:56 作者：OXXD

实现打字机效果的关键是两个动画效果，文字出现的动画，和光标闪烁出现的动画,本文小编给大家介绍了如何使用CSS实现打字机效果，文章通过代码示例介绍的非常详细,需要的朋友可以参考下

实现效果

实现

HTML 元素：

<div class="typewriter">
  <h1 class="typing">The cat and the hat.</h1>
</div>

实现打字机效果的关键是两个动画效果，文字出现的动画，和光标闪烁出现的动画。

这两个动画的实现方式也很简单，文字出现的打字机动画只通过控制元素长度即可。光标闪烁出现可以通过添加右边框，并且给边框添加颜色动画实现。

/* 打字机动画 */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* 光标动画 */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

然后将动画效果添加到指定的元素上即可。

.typewriter .typing {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* 保证文字在动画之前隐藏 */
  border-right: .15em solid orange; /* 使用边框实现光标 */
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation:  /** 动画效果 */
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

结合 Javascript 来控制样式类显示隐藏时机，可以轻松为不同文本实现打字机效果。

到此这篇关于使用CSS实现打字机效果的文章就介绍到这了,更多相关CSS打字机效果内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！

Tag：css 打字机

巧用CSS实现文字间距自适应宽度
项目需要开发一个仿医疗证书类的一个小卡片，用于模拟展示不同种类的证书信息，证书标题与左右并列的布局结构较好解决，但是根据文本块宽度，让里面的内容文字间距自适应，
2023-10-20
使用CSS还原拉斯维加斯球数字动画效果
最近大家刷抖音，是否有刷到拉斯维加斯的新地标「Sphere」，场馆内部的视觉效果非常惊人，我的第一想法就是，这个看起来用 CSS 也可以实现嘛？还有 CSS 不能实现的？本文
2023-10-20
CSS中float用法详解
CSS中的float属性是布局中经常会用到的一个属性，它可以让元素浮动到其他元素的左、右或中间位置，本文给大家介绍CSS中float用法，感兴趣的朋友一起看看吧
2023-10-18
使用CSS实现文字渐变色效果
要在文本中实现渐变色效果，我们可以使用CSS中的background-clip属性和CSS渐变来实现,本文给大家分享一个代码示例，展示如何创建文本渐变色效果，感兴趣的同学可以自己动手
2023-10-16
使用CSS实现渐变圆角边框的效果
这篇文章给大家介绍了如何使用CSS实现渐变圆角边框的效果，有没有发现在现如今的网站应用中，我们大量的使用到这类场景,在解决这类问题时，我们利用了css的mask与mask-comp
2023-10-12
使用CSS实现一个简单的无限滚动效果
无限滚动效果是一种常见的网页交互方式，可以提供更好的用户体验,本文将介绍如何使用 CSS 实现一个简单的无限滚动效果，并提供详细的代码示例,,需要的朋友可以参考下
2023-10-11
CSS实现音频播放时柱状波动效果
通过CSS的动画属性animation可以实现音频播放时的动画效果，同时配合JS操作动画的animation-play-state属性，来控制动画的暂停和播放，本文重点介绍CSS实现音频播放时柱状
2023-10-10
关于css中的 background-attachment 属性详解
这篇文章主要介绍了关于css中的 background-attachment 属性详解,在日常的使用中，还是background-attachment:fixed 使用的最多，因为这个属性更多的时候是跟background-im
2023-10-10
CSS点击切换或隐藏盒子的卷起、展开效果
这篇文章主要介绍了CSS点击切换或隐藏盒子的卷起、展开效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-10-08
CSS网站变灰的实现方法
实现网站变灰通常是为了响应某种特定事件或纪念日，例如悼念等,这可以通过在网站的最外层添加一个全局的 CSS 样式来实现,本文小编给大家介绍了几种不同的实现方法，感兴趣
2023-10-08