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

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

news 2025/7/5 7:38:27

前言

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

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/7/4 5:32:51

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2025/6/27 7:16:49

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/6/21 2:09:08

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/7/4 23:03:49

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/6/21 10:39:11

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/7/4 7:58:37

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/6/26 12:19:40

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/6/20 15:59:42

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2025/7/4 18:48:43