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

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

news 2025/12/12 2:02:31

前言

在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些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

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/12/11 18:28:17

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/12/8 9:13:58

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

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

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

编程新知 2025/12/9 3:03:54

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/12/3 21:51:26

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2025/12/5 13:36:48