仅使用 CSS 创建打字机动画效果

创建打字机效果比您想象的要容易。虽然实现这种效果的最常见方法是使用 JavaScript,但我们也可以使用纯 CSS 来创建我们的打字机动画。

在本文中,我们将了解如何仅使用 CSS 创建打字机动画效果。它简单、漂亮、容易。我们还将看看使用 CSS 与 JavaScript 创建这种效果的利弊。

要按照本文进行操作并对最终的打字机效果进行动画处理,您需要对 CSS 和 CSS 动画有基本的了解。如果你有这个基本知识,那么你就可以开始了。

使用 JavaScript 与 CSS 用于打字机动画的优缺点

最终,CSS 和 JavaScript 之间的选择将取决于您的特定需求和资源。让我们回顾一下每种方法的一些优点和缺点,以帮助您做出决定。

仅使用 CSS 比使用 JavaScript 更简单、更容易实现。这种方法使用的资源也比 JavaScript 少,这对于低端设备的性能非常重要。

但是,当仅使用 CSS 时,打字机动画可能不像使用 JavaScript 那样动态。此外,您可能无法处理更复杂的方案,例如动态更改动画的内容。

相比之下,使用 JavaScript 可以更好地控制动画。您可以微调效果的时间并使其更具动态性。JavaScript 可以比 CSS 更灵活、更具适应性,尤其是在您需要快速更改动画内容的情况下。

另一方面,JavaScript 的实现可能比 CSS 更复杂,特别是对于不熟悉它的开发人员。

如果你只需要一个简单的静态打字机效果,CSS可能是你要走的路。但是如果你需要更多的控制或动态内容,JavaScript可能是更好的选择。

现在让我们继续构建我们的打字机效果!

我们的打字机CSS动画项目概述

为了实现打字机效果,我们将对文本进行动画处理,使其逐渐显示文本。我们还将有一个光标,该光标键入文本,然后在完成键入后继续闪烁。

在我们深入研究之前,让我们回顾一下我们将使用的一些 CSS 属性。

我们将用于 @keyframes 动画,因为此规则使我们能够更好地控制要执行的动画。在我们的内容上使用属性 overflow 将确保每个单词都按照动画显示,而不是一次显示所有单词。

该 white-space 属性会将动画修剪为一行。同时,该 border-right-color 属性将帮助我们的光标从浅灰色变为透明,使动画具有逼真的闪烁光标触感。

最后,对 width 属性进行动画处理0%, 100% 以实现每个字母一次出现一个的效果。

设置项目

首先,让我们定义文本的结构,HTML我们将使用 CSS 使用打字机效果进行动画处理。在此项目的文件夹中,创建一个 index.html 文件,该文件将充当此项目演示的网页,并粘贴以下内容:

<!DOCTYPE html>
<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" /><link rel="stylesheet" href="new.css" /><title>Document</title></head><body><div class="container"><p class="first_line">Hello. My name is Temitope</p><p class="second_line">and this is a typewriter effect</p></div></body>
</html>

我们在此文件中包含一个包含两段文本的 div 容器。每个段落都有自己的类 - first_line 和 second_line ,分别 - 因为我们试图实现多行打字机效果。

这就是我们在 index.html 页面中需要做的所有事情。让我们继续设置网页样式并创建动画。

设置网页样式

在项目文件夹中创建另一个名为 style.css 并粘贴以下内容的文件:

@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap");
body {height: 100%;width: 100%;background: #111;color: #d8e0db;font-family: "Major Mono Display", monospace;
}
.container {margin-top: 5%;width: 100%;height: 100%;padding: 70px;
}
.first_line,
.second_line {white-space: nowrap; /* keep text in one line */overflow: hidden; /* hide text behind the cursor */margin: 0.5rem auto;font-family: "Major Mono Display", monospace;font-size: 2rem;font-weight: bold;
}
.first_line {border-right: 2px solid rgba(17, 17, 17, 0.9);
}
.second_line {border-right: 2px solid rgba(17, 17, 17, 0.9);
}

在我们的style.css文件中,我们尝试设置文本两行的样式。我们使用了前面讨论的一些 CSS 属性来使动画正常工作。

我们将该 overflow 属性 hidden 设置为防止项目中出现不必要的水平滚动和额外的空格。该 white-space: nowrap 设置会将我们的动画放入一行中。

最后,该 border-right 属性将充当我们的光标,我们希望在显示文本时闪烁。我们添加了其中两个 - 每行一个 - 但我们分配的黑色使它们暂时不可见。

您可能已经注意到,我们使用十六进制颜色代码 #111 将背景颜色设置为黑色,而我们的文本颜色 #d8e0db 转换为非常浅的棕褐色。您可以为自己的文本选择您喜欢的任何颜色,但要确保颜色彼此充分对比以符合辅助功能标准。

此外,我们正在使用 Major Mono Display 字体系列。就像背景和文本颜色一样,你还可以选择任何你想要的字体。但是,某些字体在打字机效果下比其他字体效果更好。

您可能需要选择干净的无衬线字体或等宽字体以获得最佳效果。另外,您将看到我们在 @keyframes 下面设置了一个width。您可能需要更改 以适应 width 您选择使用的任何字体,并确保光标闪烁动画正常工作。

使用 CSS @keyframes 创建打字机动画和 steps()

我们将使用 CSS @keyframes 为两行文本创建效果。我们希望所有文本都以逐个字母的方式键入,就像打字机一样:

@keyframes typewriter_1 {from {width: 0;}to {width: 38rem;}
}
@keyframes typewriter_2 {from {width: 0;}to {width: 40rem;}
}

规则 @keyframes 分别命名 typewriter_1 和 typewriter_2 。每个规则都有两个关键帧 — from  to 。to关键帧使用 rem ,一个可扩展的CSS单位,使我们的设计灵活、响应迅速且易于访问。

在关键帧中typewriter_1,我们将 from设置为0to设置为38rem .这可确保当文本逐个字母显示时,我们的光标将从文本开头的宽度 0 到文本末尾的宽度 38 闪烁。我们还将typewriter_2 将 from 和 to 宽度分别设置为0和 40rem 。

我们将 @keyframes 创建一个动画,其中元素从左到右逐渐出现,就像打字机打印文本一样。

若要应用此动画,请使用该 animation 属性将其包含在字幕类选择器中。在我们的例子中,我们会将 div 字幕更新为以下内容:

.first_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for firstline  */animation: typewriter_1 6s 
}
.second_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for econd_line  */animation: typewriter_2 5s 
}

动画与动画速度一起添加,以流畅地显示我们的文本。结果如下:

图片

它看起来不像我们想要的方式,对吧?请记住,我们的目标是让它看起来像打字机的工作方式——也就是说,以逐个字母的方式打字。为了实现这一点,我们将使用 steps() CSS函数。

CSS 中的函数用于指定计时steps()函数中的间隔数或步数。在我们的例子中,我们将在我们的 animation 属性中使用它来允许我们的文本逐个字母显示:

.first_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for text + cursor */animation: typewriter_1 6s steps(33) 1s 1 normal both;}
.second_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for text + cursor */animation: typewriter_2 5s steps(31) 1s 1 normal both;}

在上面的代码中,您会注意到步骤分别是33和 31 。我们通过自己计算文本中的字符数来获得这些数字。在我们的浏览器中检查结果:

图片

现在,这一切都走到了一起。但是,请注意,在我们的结果中,光标没有显示或闪烁。我们希望光标闪烁,以使打字机动画看起来更逼真。此外,两行文本同时出现,这不是打字机的外观。

为了解决这个问题,我们还将使用@keyframes为每行的光标创建动画:

@keyframes first_cursor {from {border-right-color: rgba(17, 17, 17, 0.9);}to {border-right-color: rgba(255, 255, 255, 0.8);}
}
@keyframes second_cursor{from {border-right-color: rgba(17, 17, 17, 0.9);}to {border-right-color: rgba(255, 255, 255, 0.8);}
}

在上面的代码中, border-right-color 两个光标的属性设置将在移动时从黑色变为白色。这将为我们的每个光标提供闪烁效果。

我们将在文本类的属性中包含 animation 此项,并将每个动画方向属性设置为infinite。这将使光标消失并 780ms 永远重新出现:

.first_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for text + cursor */animation: typewriter_1 6s steps(33) 1s 1 normal both,first_cursor 900ms steps(33) 8;
}
.second_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for text + cursor */animation: typewriter_2 5s steps(31) 1s 1 normal both,second_cursor 900ms steps(31) infinite;-webkit-animation-delay: 7s;animation-delay: 7s;
}

在上面的代码中,我们添加了 infinite 第二个光标动画,因为我们的文本在第二行结束。这将使光标消失并 900ms 永远重新出现。

我们还在second_line 中添加 了 7 秒 delay ,因此它不会与我们的第一行类型和显示同时运行。

全部完成!在浏览器中查看结果时,我们现在应该看到以下内容:

图片

恭喜!我们只是只用CSS制作了一个打字机动画效果。

请注意,如果您只需要一行文本,则可以执行相同的步骤。唯一的区别是添加到 infinite 第一行的动画中,因为没有第二行。这将确保光标在单行末尾连续闪烁。您也不需要像我们在第二行中那样添加延迟属性。

总结

在本文中,我们研究了如何使用CSS创建完全没有JavaScript的打字机动画效果。只需基本的HTML代码和非复杂的CSS语法即可轻松做到这一点。另外,它没有浏览器支持问题!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/28911.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全球互联网步入IPv6时代,IPv4逐渐告别历史舞台

随着互联网技术的飞速发展&#xff0c;全球互联网正迎来IPv6与IPv4并存转型阶段。IPv6, 新一代互联网协议&#xff0c;以其更大的地址空间和更高的效率正逐渐取代IPv4成为互联网的主导。 全球互联网开始全面实施IPv6这意味着IPv4时代正在逐渐走向尾声。IPv4与IPv6为互联网协议版…

【Spring Boot】了解Spring Boot 的日志文件

目录 一、日志的作用 二、日志文件的简单使用 1、Spring Boot中的默认日志 2、自定义日志打印 三、日志级别 1、日志级别分类 2、日志级别的设置 3、日志持久化 四、基于LomBok的日志输出 1、安装Lombok插件 2、使用Lombok添加日志 3、使用Lombok添加getter和setter…

Java关键字:final解析

目录 一、final变量 二、final方法 三、final类 final是Java语言中的一个关键字&#xff0c;凡是被final关键字修饰过的内容都是不可改变的。 一、final变量 final关键字可用于变量声明&#xff0c;一旦该变量被设定&#xff0c;就不可以再改变该变量的值。通常&#xff0…

C++STL简介

1.STL简介 1.1.STL的概念 STL(standard template libaray即&#xff1a;“标准模板库”)是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 1.2.STL的版本 原始版本&#xff1a;Alexander Stepanov、Meng …

SAM 大模型Colab快速上手【Segment Anything Model】

Google Colab 是一个基于云的 Jupyter 笔记本环境&#xff0c;允许您通过浏览器编写、运行和共享 Python 代码。 它就像 Google 文档&#xff0c;但用于代码。 通过免费版本的 Google Colab&#xff0c;你可以获得带有约 16GPU VRAM 的 Nvidia Tesla T4 GPU&#xff0c;这对于…

centos手动离线安装php,nginx

1、CentOS 7上安装并配置Nginx https://www.cnblogs.com/xujiecnblogs/p/16843984.html /usr/local/nginx/sbin/nginx #启动 /usr/local/nginx/sbin/nginx -s stop #关闭 /usr/local/nginx/sbin/nginx -s reload #重启 增加h…

解决K8S集群设置污点后,污点不生效,下发应用的问题

问题&#xff1a;在集群中部署了三个daemonset&#xff0c;一开始加了容忍Toleration&#xff0c;后边去掉Toleration后&#xff0c;还是一直往边缘节点上部署应用&#xff0c;非常离谱 解决&#xff1a;删掉Toleration后&#xff0c;需要把annotations一起删掉&#xff0c;因为…

区块链媒体发稿:区块链媒体宣发常见问题解析

据统计&#xff0c;由于区块链应用和虚拟货币的兴起&#xff0c;越来越多媒体对区块链领域开展报导&#xff0c;特别是世界各国媒体宣发全是热火朝天。但是&#xff0c;随着推卸责任媒体宣发的五花八门&#xff0c;让很多人因而上当受骗&#xff0c;乃至伤害一大笔资产。身为投…

打破雇佣思想 云畅科技CIO曾颖博士浅析零雇工模式

作者简介 INTRO 曾 颖 工商管理博士 云畅科技高级合伙人、CIO 产业咨询&#xff06;企业数字化转型落地专家 2018年&#xff0c;“零雇工”企业组织创新2018全球创新创业教育高峰论坛在西安举行&#xff0c;我当时作为上海沐新众创空间的导师和分会场“企业家如何创建零雇工…

6.pip简介,第三方库的安装

引言 使用过Visual Studio的小伙伴可能对npm不陌生&#xff0c;没错&#xff0c;pip与npm的功能是一样的。 首先要知道&#xff0c;Python这门语言拥有着丰富的标准库以及先辈们开发的各种功能强大的第三方库。而今天我们主要学习的呢就是关于Python中的包管理工具。它是Pytho…

模仿火星科技 基于cesium+ 贴地测量+可编辑

当您进入Cesium的编辑贴地测量世界&#xff0c;下面是一个详细的操作过程&#xff0c;帮助您顺利使用这些功能&#xff1a; 1. 创建提示窗&#xff1a; 启动Cesium应用&#xff0c;地图场景将打开&#xff0c;欢迎您进入编辑模式。在屏幕的一角&#xff0c;一个友好的提示窗将…

Java基础入门篇——While循环(十二)

目录 一、循环结构语句 二、while循环语句 三、do-while循环语句 四、break使用 一、循环结构语句 在实际生活中经常会将同一件事情重复做很多次。例如&#xff0c;在做眼保健操的第四节轮刮眼眶时&#xff0c;会重复刮眼眶的动作&#xff1a;打乒乓球时&#xff0c;会重复…

车云一体化系统基础理论

车云一体化系统基础理论 介绍目标正文 参考文档 介绍 最近在调研车云链路一体化的整套解决方案&#xff0c;涉及分布式消息队列&#xff08;RocketMQ&#xff09;、分布式存储&#xff08;Doris&#xff09;、离线数据处理&#xff08;Spark&#xff09;、用户行为日志分析&am…

华为OD真题--字符串加密

2023华为OD统一考试&#xff08;AB卷&#xff09;题库清单-带答案&#xff08;持续更新&#xff09;or2023年华为OD真题机考题库大全-带答案&#xff08;持续更新&#xff09; "给你一串未加密的字符串str&#xff0c;通过对字符串的每一个字母进行改变来实现加密&#xf…

maven配置settings文件,包含配置阿里云镜像,配置maven私服,配置私服密码

配置阿里云镜像 <!-- 多个相同 mirrorOf 的 mirror配置&#xff0c;会根据他们声明的顺序 决定优先级 --><!--阿里云仓库地址来源 see https://developer.aliyun.com/mvn/guide--><mirror><id>aliyunMaven01</id><name>aliyun maven</n…

vuejs 设计与实现 - 双端diff算法

我们介绍了简单 Diff 算法的实现原理。简单 Diff 算法利用虚拟节点的 key 属性&#xff0c;尽可能地复用 DOM元素&#xff0c;并通过移动 DOM的方式来完成更新&#xff0c;从而减少不断地创建和销毁 DOM 元素带来的性能开销。但是&#xff0c;简单 Diff 算法仍然存在很多缺陷&a…

【MFC】07.MFC第三大机制:消息映射-笔记

本专栏上两篇文章分别介绍了【MFC】05.MFC第一大机制&#xff1a;程序启动机制和【MFC】06.MFC第二大机制&#xff1a;窗口创建机制&#xff0c;这篇文章来为大家介绍MFC的第三大机制&#xff1a;消息映射 typfd要实现消息映射&#xff0c;必须满足的三个条件&#xff1a; 类必…

未来,运营的重要性大于产品?

微博上看到某产品大V的一个观点&#xff0c;说在未来&#xff0c;产品运营的重要性会大过产品经理&#xff0c;还挺认同的&#xff0c;谈谈我的想法。 这个观点的核心依据是&#xff0c;目前没有新的产品形态&#xff0c;各种产品解决方案都是标准化的&#xff0c;产品由开疆辟…

Java 面试题2023

Java core JVM 1、JVM内存模型 2、JVM运行时内存分配 3、如何确定当前对象是个垃圾 4、GCrooot 包括哪些? 5、JVM对象头包含哪些部分 6、GC算法有哪些 7、JVM中类的加载机制 8、分代收集算法 9、JDK1.8 和 1.7做了哪些优化 10、内存泄漏和内存溢出有什么区别 11、J…

告别传统人肉运维,实现360°可观测!奇点云数据存算引擎DataKun R2.0发布

近日&#xff0c;奇点云的数据云全系产品发布新一季更新。本文着重分享数据存算引擎DataKun、数据安全引擎DataBlack、指标工厂SimbaMetric、标签工厂SimbaTag的最新进展。 摘要&#xff1a; 数据存算引擎DataKun R2.0发布&#xff0c;在安全稳定、智能运维、自主可控等层面均…