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

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

news 文章来源：https://blog.csdn.net/wzc_coder/article/details/131266612 2025/1/11 7:55:35

前言

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

示例效果

文字打印.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动画是一个非常强大的属性,属性值也特别多,很多动画,看似很简单,但是一写就不会,还是要多模仿,多写相关的动画

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

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

2023-06-15

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

2023-06-14

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

2023-06-10

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

2023-06-10

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

2023-06-07

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

2023-06-04

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

2023-06-01

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

2023-05-31

点击左下角查看更多

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Android Studio入门

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

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

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

参考网址： 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文件，查找报错位置执行指令 ： # pkg-co…...

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

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

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

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

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

xlrd限制条数，openpyxl 上限较高，所以推荐这种写法 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 适用地区：北京舞台上，戏曲演员有登场亮相的瞬间。生活中也有许多亮相时刻：国旗下的讲话，研学成果的汇报，新产品的发布……每一次亮相，都受到众人关注；每一次亮相，…...

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

Vue中如何进行图表绘制

Vue中如何进行图表绘制数据可视化是Web应用中非常重要的一部分，其中图表绘制是其中的重要环节。Vue作为一款流行的前端框架，提供了很多优秀的图表库，以满足不同业务场景下的需求。本文将介绍如何在Vue中进行图表绘制，包括使用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中进行声明： private slots:void timeOut(); // 定时器超时槽函数在.cpp中进行实现相应的功能： // 构造函数 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体系结构操作系统一种软件，控制计算机硬件资源，提供程序运行环境。操作系统包含了内核和一些其他软件（如shell、公用函数库、应用程序等）。例如Linux就是GNU操作系统的内核，因此也称为GNU/Linux操作…...

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

MATLAB 入门之旅摘要

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

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

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

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

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

Linux 安装Docker完整教程（六）

文章目录背景一、Docker简介二、docker desktop 和 docker engin 区别三、Linux 安装Docker1. 安装docker的前置条件：2. 查看Docker版本3. 检查是否安装过Docker4. Docker自动化安装 (不想自带化安装的可跳过本步骤，选择手动安装)5. Docker手动安装&…...

编程日记 2023/6/18 6:49:04

手机连接adb 相关问题汇总

目录关于端口占用问题1 关于修改adb 端口配置问题2 方法3 方法4 关于端口占用问题1 转载链接：https://www.jianshu.com/p/902a89b06271 报错信息： error: no device/emulators found error: device still connecting 解决方案： 重启…...

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

MySQL数据相关操作

一、介绍 MySQL数据操作： DML 在MySQL管理软件中，可以通过SQL语句中的DML语言来实现数据的操作，包括使用INSERT实现数据的插入 UPDATE实现数据的更新使用DELETE实现数据的删除使用SELECT查询数据以及。二、插入数据INSERT 1. 插入完整…...

编程日记 2023/6/18 5:42:21

2023年5月青少年软件编程（Python）等级考试试卷（四级）

青少年软件编程（Python） 等级考试试卷（四级）2023.6 分数： 100 题数： 38 一、单选题(共 25 题， 共 50 分) 1.下列程序段的运行结果是？ （ ） def s(n): if n0: …...

编程日记 2023/6/18 5:09:01

Python selenium自动化测试模型图解

1、线性测试优势：每一个脚本都是完整独立的，每一个脚本对应一个测试用例缺点：开发成本高，会有重复操作重复脚本；维护成本也高，修改重复操作的脚本时，要逐一进行修改。 2、模块化驱动测试 …...

编程日记 2023/6/18 4:35:40

【详解】篮球记分牌硬件及代码

篮球记分牌设计 1 系统设计1.1 设计任务 1.2 性能指标要求1.2 设计思路及设计框图1.2.1设计思路1.2.2总体设计框图1.2.3电路原理图1.2.3 PCB布线图 2 主要程序模块的设计及原理2.1 外部中断0 2.2 菜单2.3 两队比分及两队犯规次数显示及修改2.3.1选择功能2.3.2修改功能2.3.3显示…...

编程日记 2023/6/18 4:02:18

FreeRTOS实时操作系统（二）系统文件代码学习

文章目录前言系统配置任务创建任务创建删除实践前言接着学习正点原子的FreeRTOS教程，涉及到一些详细的系统内文件代码系统配置可以通过各种的宏定义来实现我们自己的RTOS配置（在FreeRTOSconfig.h） “INCLUDE”：配置API函数…...

编程日记 2023/6/18 3:28:57

分布式驱动电动汽车定速巡航控制

目录前言 1. 电机模型 1.1电机数学模型 1.2 电机传递函数模型 2. 控制器设计...

编程日记 2023/6/18 2:55:37

如何启动和关闭分布式集群

分布式集群是由多个节点组成的系统，可以提供高性能、高可用、高扩展的数据处理能力。本文介绍如何启动和关闭一个包含hadoop、zookeeper、hbase和spark的分布式集群。目录启动顺序关闭顺序启动和关闭hadoop 启动hadoop 关闭hadoop 查看网页启动和关闭z…...

编程日记 2023/6/18 2:22:15

WLAN基本概述及简单组网配置

WLAN概述 WLAN即Wireless LAN（无线局域网），是指通过无线技术构建的无线局域网络。WLAN广义上是指以无线电波、激光、红外线等无线信号来代替有线局域网中的部分或全部传输介质所构成的网络。家庭WLAN产品：家庭Wi-Fi路由器：通过把有线网络信号转换成无线信号，供家庭电…...

编程日记 2023/6/18 1:48:55

怎么做二级网站/杭州seo排名优化

文章目录1.读MPS5023芯片：0x03ff即将前6位屏蔽2.读PXE1410CDM电压和电流：一个数&0x7ff，将这个数前5位全变为0，其余位不变2.1 1ine112.2 1ine16：一种方法2.3 1ine16：另一种方法3.读ADS7830的8个channel电…...

编程日记 2025/1/11 3:18:42

专业网站优化电话/seo优化怎么做

终端中输入 : open .bash_profile , 打开文件(如果没有设置过， 可以用vim .bash_profile)后追加下面的内容, 路径为自己下载解压后的gradle的目录. export PATH GRADLE_HOME/Users/zhinantech/gradle-4.4/ export GRADLE_HOME export PATH$PATH:$GRADLE_HOME/bin…...

编程日记 2025/1/11 2:49:17