【H5 | CSS | JS】如何实现网页打字机效果？快收下这份超详细指南（附源码）

news2024/10/2 3:32:31

在这里插入图片描述

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。

💅文章概要： 各位小伙伴们大家好呀，今天又是久违的系列专刊更新——《优秀前端案例分享》，今天给大家带来的优质案例是网页实现打字机效果，让我们一起来看看吧！

🤟每日一言： 梦想总还是要有的，万一实现了呢？

前言

在这里插入图片描述

各位小伙伴们大家好呀，今天又是久违的系列专刊更新——《优秀前端案例分享》，今天给大家带来的优质案例是网页实现打字机效果，让我们一起来看看吧！

打字机效果预览

下面为大家展示的是网页实现打字机效果的预览图：

在这里插入图片描述

实现方式

笔者认为：实现网页打字机效果有两种方式来实现是比较好的。第一种方法是纯原生CSS手撸，第二种方法是使用JS组件库来实现。

在这里插入图片描述

CSS实现

使用纯CSS实现打字机效果主要用到了@keyframes 和伪元素 :after，在下方给了一个CSS实现网页打字机效果的示例代码，小伙伴们可以学习一下。

@keyframes的语法规则如下：
@keyframes animationname {keyframes-selector {css-styles;}}
使用@keyframes规则，你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用%，或关键字“from”和“to”，这是和0%到100%相同。
0%是开头动画，100%是当动画完成。

下面给出一段利用纯CSS实现的打字机效果代码，大家可以复制粘贴查看实现效果！

<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>Typing</title>
  <link rel="stylesheet" href="style.css">
  <style>
  * {
  margin: 0;
  padding: 0;
  font-family: monospace, sans-serif;
  font-weight: bold;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  height: 100vh;
  background-color: #fff;;
}

.content {
  animation: content-slide-in 2s steps(13) forwards;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.content::after {
  content: '';
  position: absolute;
  right: 0;
  height: 16px;
  animation: sprinkle-bling .5s steps(2) infinite;
}

@keyframes content-slide-in {
  from {
    width: 0;
  }
  to {
    width: 13ch;
  }
}

@keyframes sprinkle-bling {
  from {
    border-right: 1px solid transparent;
  }
  to {
    border-right: 1px solid #000;
  }
}

  </style>
</head>
<body>
  <div class="container flex">
    <div class="content">
      Hello, World!
    </div>
  </div>
</body>
</html>

JS组件库

JS组件库可以快速的实现网页打字机效果，并且可以多元定制化打字效果，强烈推荐使用JS组件库方法！下面给大家介绍几个轻量级的JS打字机组件库:

Typed.js

在这里插入图片描述
Typed.js是一个类型库，输入任意字符串，它将以打字方式显示出来。您可以设置打字速度，退格等参数。

Typed.js安装

（一）CDN引入

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

（二）npm安装

npm install typed.js

Typed.js的使用

（一）设置参数

  <script>
    var typed = new Typed('.typed', {
      strings: ["SAP ABAPer", "FICO Consultant^1000"], //输入内容, 支持html标签
      typeSpeed: 100, //打字速度
      backSpeed: 50, //回退速度
      loop: true,
    });  
  </script>

（二）使用<span>标签引用上面设置的id

<span id="typed" style="white-space: pre-wrap;line-height: 30px;"></span>

Typed.js参数

更多参数设置请参考原作者github仓库——Typed.js

TypeLighter

在这里插入图片描述

TypeLighter.js是实现打字机效果的一个类型库，输入任意字符串，它将以打字方式显示出来。您可以设置多种参数进行个性化配置。

TypeLighter演示案例代码

下面给出一段利用TypeLighter库实现的打字机效果代码，大家可以复制粘贴查看实现效果！

<script src ="https://cdn.jsdelivr.net/npm/typelighterjs/typelighter.min.js"></script>

<style>
	p{
	  /*父级*/
     position:ablative;
      /*子级*/
     position:absolute;
     left:50%;
     top:50%;
     transform:translate(-50%,-50%)
	}
</style>
<p>Deeply <span class="typeWriter" data-max="1.5" data-text='["satisfying.","customizable."]'</span></p>

TypeLighter演示效果预览

在这里插入图片描述

TypeLighter参数

属性	默认值	使用
data-text	Null	保持字符串的数组一个接一个地写入。
data-speed	1	写入速度与此整数成比例。
data-start	500 (ms)	写下一个字符串之前的延迟。
data-end	2000 (ms)	删除当前字符串之前的延迟。
data-random	True	启用后，TypeWriter会在写入或删除下一个字符之前等待一段随机时间。
data-max	Infinity	TypeWriter停止之前的最大完整迭代次数。
data-dltSpeed	True	启用后，删除给定字符串的速度是写入字符串的两倍。
data-checkVisible	False	启用后，当元素出现在视口中时，动画将立即开始。

Easy-typer-js

在这里插入图片描述

easy-typer-js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果.而且对MVVM框架支持完美，还兼容原生JS.

关于对easy-typer-js库的详细介绍可以看这篇博主文章：[JS插件]功能十分强大的打字机效果: easy-typer-js，在此不过多赘述。

写在最后的话

本文花费大量时间介绍了多种方式实现网页打字机效果，希望能帮助到各位小伙伴，码文不易，还望各位大佬们多多支持哦，你们的支持是我最大的动力！

在这里插入图片描述

✨ $\textcolor{blue}{原创不易，还希望各位大佬支持一下}$

👍 $\textcolor{9c81c1}{点赞，你的认可是我创作的动力！}$

⭐️ $\textcolor{ed7976}{收藏，你的青睐是我努力的方向！}$

✏️ $\textcolor{98c091}{评论，你的意见是我进步的财富！}$