当前位置： 首页 > news >正文

使用css3如何实现一个文字打印效果

news 2025/8/26 17:08:28

前言

在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些css3动画的

示例效果

3fc2b4ced6450e3a6e3da3b604f4af05.gif
文字打印.gif

实现这个动画原理

想要实现这个动画,改变元素的宽度,结合动画css3关键帧实现

具体代码如下所示

<!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" /><title>css3实现打字机效果</title>
<style>
.example-css3dayin {text-align: center;font-weight: 700;font-size: 60px;line-height: 79px;background: linear-gradient( 270deg, rgba(198, 141, 255, 0.9) 8.92%, #5685ff 46.17%, #48d6ff 92.17% );-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;white-space: nowrap;animation: animateText 4.7s steps(8) infinite;-webkit-animation: animateText 4.7s steps(8) infinite;
}@-webkit-keyframes animateText {0% {width: 0;}35% {width: 8.1em;}75% {width: 8.1em;}100% {width: 0;}}@keyframes animateText {0% {width: 0;}35% {width: 8.1em;}75% {width: 8.1em;}100% {width: 0;}}      </style></head><body><p class="example-css3dayin">AI智能，引领未来</p></body>
</html>

效果当中的关键帧动画

animation动画通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果；

相对过渡动画，animation动画可以实现更多变化，更多控制，实现自动播放等效果

制作animation动画需要两个步骤

第一步，需要先定义动画，0%的时候我们一般建议什么也不要设置，默认就是初始的样式

@keyframes 动画名称 {0% {开始动画}100% {结束动画}}

第二步，定义了的动画需要调用才能使用生效，哪一个盒子需要调用动画就设置以下两个必须的属性

animation-name: 动画名称;animation-duration: 持续时间（单位是s）

例如上面的动画

.example-css3dayin {// 上面省略animation: animateText 4.7s steps(8) infinite;-webkit-animation: animateText 4.7s steps(8) infinite;
}@-webkit-keyframes animateText {0% {width: 0;}35% {width: 8.1em;}75% {width: 8.1em;}100% {width: 0;}}@keyframes animateText {0% {width: 0;}35% {width: 8.1em;}75% {width: 8.1em;}100% {width: 0;}}

0%是动画的开始，100%是动画的完成，完成整个动画过程的规则就是动画序列；

动画定义的是也可以用from和to来定义，的等同于0%到100%

@keyframes中规定某项css样式，将当前的样式逐渐改为新的样式的过程，称之为动画，我们可以改变任意的样式，改变任意的次数

CSS3动画常见属性

  • @keyframes :规定动画

  • animation: 所有动画属性的简写属性，除了 animation-play-state 属性。

  • animation-name:规定 @keyframes 动画的名称。（必须有）。

  • animation-duration: 规定动画完成一个周期所花费的秒或毫秒。默认是 0。（必须有）。

  • animation-timing-function: 规定动画的速度曲线。默认是 “ease”。

  • animation-delay: 规定动画何时开始。默认是 0。必须写单位s。

  • animation-iteration-count: 规定动画被播放的次数。默认是 1。循环是infinite；

  • animation-direction: 规定动画是否在下一周期逆向地播放。默认是 “normal”。alternate逆向

  • animation-play-state: 规定动画是否正在运行或暂停。默认是 “running“,暂停是paused。

  • animation-fill-mode: 规定对象动画时间之外的状态。保持现状forwards，回到起始backwards

animation-timing-function

  • animation-timing-function: linear,动画从头到尾的速度是相同的。

  • animation-timing-function: ease,默认。动画以低速开始，然后加快，在结束前变慢。

  • animation-timing-function: ease-in,动画以低速开始。

  • animation-timing-function: ease-out,动画以低速结束。

  • animation-timing-function: ease-in-out,动画以低速开始和结束。

  • animation-timing-function: steps(步数设置),让动画在规定的时间里几步完成

CSS3动画简写

animation: 动画名称  持续时间  运动曲线   何时开始（延时） 播放次数  是否反向播放  动画结束后的状态
animation: name duration timing-function delay iteration-count direction fill-mode
animation: animateText 4.7s steps(8) infinite;

注意

动画简写属性的时候，动画名称和动画持续时间必须要书写，其他属性需要就书写不需要就省略，如果书写动画延时必须书写单位s，哪怕是0s也要书写

持续时间和延时的时间有先后顺序

多个动画同时调用

如果一个元素需要同时调用多个动画我们只需要用一个animation,不同的动画用英文的逗号隔开

animation: bear .3s steps(8) infinite;animation: move 1s ease forwards;// 可以合并到一起使用animation: bear .3s steps(8) infinite, move 3s ease forwards;

总结

css3动画是一个非常强大的属性,属性值也特别多,很多动画,看似很简单,但是一写就不会,还是要多模仿,多写相关的动画

看到了有趣的效果,就研究一下的,可以应用到公司的产品和网站当中去的

ca4ea62f5bfc300b61edb9e31dc784ec.png

120e6deb99b50aa1058ef6f32a5cd6b2.jpeg

2c17862ae9b868f52e2a99e356e8a4bd.png

f9800f1633ad42da1d159439022832b1.png

聊一聊最近几年学历大通胀的事情，以及大学几年怎么样可以节省不必要的开支

2023-06-15

d4f60877e4a387478f3ff580e5323337.jpeg

告别纺织业，大龄半路出家，前端CSS领域大神—“大漠”的封神之路

2023-06-14

638eeb0d846045c02f1fe96fa5135da9.jpeg

翟欣欣已被捕,正义也许会迟到,但不会缺席,大块人心

2023-06-10

0a328e36f84bfb84827c4988059db6e5.jpeg

IT 男遭前妻敲诈勒索自杀，六年后一审宣判了

2023-06-10

66143a4395b89e105a66e860ed45409a.jpeg

职场中有哪些不成熟的表现

2023-06-07

ad9fc2d8de1ee7cccf152f84bd94dfec.jpeg

这些高频面试问题,求职者应该怎么回答

2023-06-04

0f000afa03971cc951d9bdb83d4a12fd.jpeg

稚晖君刚拿了百度投资，估值被曝已超独角兽

2023-06-01

3cf9d8bb05fdac70d34524ea679491e2.jpeg

关于职场中的面试,要是遇到这些问题时,应该怎么回

2023-05-31

105fb0abe91315e1cc1fe9ae35a5dfea.jpeg
点击左下角查看更多

8f2154a6e945d406eb2127627ab745a1.gif

相关文章：

使用css3如何实现一个文字打印效果

前言 在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些css3动画的 示例效果 文字打印.gif 实现这个动画原理 想要实现这个动画,改变元素的宽度,结合动画css3关键帧实现 具体代码如下所示 <!DOCTYPE html> <html lang"en"><head><m…...

编程日记 2023/6/18 17:56:07

【雕爷学编程】Arduino动手做（115）---HB100多普勒雷达模块

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…...

编程日记 2023/6/18 17:22:46

深度学习笔记之Transformer(一)注意力机制基本介绍

深度学习笔记之Transformer——注意力机制基本介绍 引言回顾&#xff1a; Seq2seq \text{Seq2seq} Seq2seq模型中的注意力机制注意力机制的简单描述注意力机制的机器学习范例&#xff1a; Nadaraya-Watson \text{Nadaraya-Watson} Nadaraya-Watson核回归 Nadaraya-Watson \text…...

编程日记 2023/6/18 16:49:24

基于SpringBoot的SSM整合案例 -- SpringBoot快速入门保姆级教程（四）

文章目录 前言1.设计创建数据库表tbl_book2.创建新的SpringBoot模块&#xff0c;勾选相关依赖3. 添加SpringBoot创建项目时没有提供的相关坐标4.根据数据库表创建实体类Book5.编写dao层操作BookDao6.编写Service服务层接口BookService7.编写服务层实现类BookServiceImpl8.编写B…...

编程日记 2023/6/18 16:16:03

占据80%中国企业出海市场，亚马逊云科技如何为出海客户提供更多资源和附加值

亚马逊云科技就可以做到&#xff0c;作为占据80%中国企业出海市场的亚马逊云科技&#xff0c;其覆盖全球的业务体系&#xff0c;从亚马逊海外购、亚马逊全球开店、亚马逊智能硬件与服务&#xff0c;Amazon Alexa&#xff0c;Amazon Music都是属于亚马逊云科技“梦之队”的一员。…...

编程日记 2023/6/18 15:42:42

系统架构设计师笔记第11期：信息安全的抗攻击技术

拒绝服务攻击 拒绝服务攻击&#xff08;Denial of Service&#xff0c;DoS&#xff09;是一种旨在使目标系统无法提供正常服务的攻击方式。攻击者通过向目标系统发送大量的请求或占用系统资源&#xff0c;超过系统的承载能力&#xff0c;导致系统过载或崩溃&#xff0c;从而使…...

编程日记 2023/6/18 15:09:21

TLD7002学习笔记（二）-使用S32K144驱动TLD7002

文章目录 1. 前言2. 评估板简介3. 官方驱动3.1 官网驱动的介绍3.2 官方驱动的移植3.3 官方驱动的使用 4. 参考资料 1. 前言 本篇文章是TLD7002学习笔记的第二篇&#xff0c;主要是介绍如何使用S32K144驱动TLD7002-16ES。为此&#xff0c;笔者做了一套基于TLD7002-16ES的评估板…...

编程日记 2023/6/18 14:36:00

[元带你学: eMMC协议详解 14] 数据擦除（Erase) 详解

依JEDEC eMMC 5.1及经验辛苦整理&#xff0c;付费内容&#xff0c;禁止转载。 所在专栏 《元带你学: eMMC协议详解》 内容摘要 全文 4200字&#xff0c; 主要内容介绍了各种擦除操作概念以记用法&#xff0c;总结了不同擦除操作的区别&#xff0c; 根据不同安全级别和应用场景…...

编程日记 2023/6/18 14:02:39

【程序人生-Hello‘s P2P】哈尔滨工业大学深入理解计算机系统大作业

计算机系统 大作业 题 目 程序人生-Hello’s P2P 专 业 xxxx 学 号 2021xxxx 班 级 210xxxx 学 生 xx 指 导 教 师 xxx 计算机科学与技术学院 2023年5月 摘 要 HelloWorld是每个程序员接触的第一个程序&#xff0c;表面上平平无奇的它背后却是由操作系统许多设计精巧的机制支撑…...

编程日记 2023/6/18 13:29:16

Android Studio入门

首先确保系统已经安装好JDK和Android SDK Android SDK的安装有两种方案 方案一&#xff1a;直接下载包安装 官网下载 国内下载 方案二&#xff1a;使用命令行工具进行安装 在Android Studio官网下载Command line tools 最新&#xff1a;如果使用 Android Studio&#xff0c;…...

编程日记 2023/6/18 12:55:55

r2pm -ci r2ghidra 时报错：checking pkg-config flags for r_core... no

参考网址&#xff1a; sys/python.sh fails with checking pkg-config flags for r_core... no Issue #1943 radareorg/radare2 GitHub 进入目录/root/.local/share/radare2/r2pm/git/r2ghidra查看configure文件&#xff0c;查找报错位置 执行指令 &#xff1a; # pkg-co…...

编程日记 2023/6/18 12:22:34

【宿舍管理系统】注册登录页面的实现(前端）

目录 一.创建一个jsp文件&#xff0c;命名为login.jsp 代码&#xff1a; 1. 2. 3. 4. 5. 6. ​编辑 二. 创建一个css文件&#xff0c;并命名为style.css 1. ​编辑效果如下&#xff1a; ​编辑 代码解析&#xff1a; 2. 效果如下&#xff1a; 代码解析&#xff1…...

编程日记 2023/6/18 11:49:13

python写入excel,(二) 言简意赅傻瓜式写法

xlrd限制条数&#xff0c;openpyxl 上限较高&#xff0c;所以推荐这种写法 import openpyxl # openpyxl引入模块 def write_to_excel(path: str, sheetStr, info, data): # 实例化一个workbook对象 workbook openpyxl.Workbook() # 激活一个sheet …...

编程日记 2023/6/18 11:15:52

我用ChatGPT写2023高考语文作文（六）：北京卷II

2023年 北京卷 II 适用地区&#xff1a;北京 舞台上&#xff0c;戏曲演员有登场亮相的瞬间。生活中也有许多亮相时刻&#xff1a;国旗下的讲话&#xff0c;研学成果的汇报&#xff0c;新产品的发布……每一次亮相&#xff0c;都受到众人关注&#xff1b;每一次亮相&#xff0c;…...

编程日记 2023/6/18 10:42:31

Vue中如何进行图表绘制

Vue中如何进行图表绘制 数据可视化是Web应用中非常重要的一部分&#xff0c;其中图表绘制是其中的重要环节。Vue作为一款流行的前端框架&#xff0c;提供了很多优秀的图表库&#xff0c;以满足不同业务场景下的需求。本文将介绍如何在Vue中进行图表绘制&#xff0c;包括使用Vu…...

编程日记 2023/6/18 10:09:10

【Soft-prompt Tuning for Large Language Models to Evaluate Bias 论文略读】

Soft-prompt Tuning for Large Language Models to Evaluate Bias 论文略读 INFORMATIONAbstract1 Introduction2 Related work3 Methodology3.1 Experimental setup 4 Results5 Discussion & Conclusion总结A Fairness metricsB Hyperparmeter DetailsC DatasetsD Prompt …...

编程日记 2023/6/18 9:35:49

Qt 定时器与定时事件

一、定时器 在头文件.h中进行声明&#xff1a; private slots:void timeOut(); // 定时器超时槽函数在.cpp中进行实现相应的功能&#xff1a; // 构造函数 Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget) {ui->setupUi(this);// 创建一个新的定时…...

编程日记 2023/6/18 9:02:28

《UNUX环境高级编程》(1)UNIX基础

1、引言 2、UNIX体系结构 操作系统 一种软件&#xff0c;控制计算机硬件资源&#xff0c;提供程序运行环境。操作系统包含了内核和一些其他软件&#xff08;如shell、公用函数库、应用程序等&#xff09;。例如Linux就是GNU操作系统的内核&#xff0c;因此也称为GNU/Linux操作…...

编程日记 2023/6/18 8:29:07

MATLAB 入门之旅摘要

matlab官方基础课程&#xff0c;重温或者入门都是不错的选择。 MATLAB 入门之旅 MATLAB 入门之旅 | 自定进度在线课程 - MATLAB & Simulink 基本语法 示例说明x pi使用等号 () 创建变量。 左侧 (x) 是变量的名称&#xff0c;其值为右侧 (pi) 的值。y sin(-5)您可以使用括…...

编程日记 2023/6/18 7:55:46

chatgpt赋能python：Python小数运算：解决精度问题的最佳实践

Python小数运算&#xff1a;解决精度问题的最佳实践 在进行小数运算时&#xff0c;Python是一种十分常用的语言&#xff0c;但在进行小数运算时&#xff0c;由于二进制和十进制之间的转换不完全&#xff0c;可能会导致一些精度问题。为了避免这些问题&#xff0c;让我们一起了…...

编程日记 2023/6/18 7:22:25

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/8/22 4:16:17

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/8/22 5:05:06

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/8/5 22:40:10

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/8/15 2:04:44

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/8/6 8:13:05

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/8/26 4:30:55

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/7/27 0:38:54

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2025/8/22 5:07:56

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/7/8 22:58:33

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2025/8/24 5:46:49