【前端动效】HTML + CSS 实现打字机效果

目录

1. 效果展示

2.  思路分析

2.1 难点

2.2 实现思路

3. 代码实现

3.1 html部分

3.2 css部分

3.3 完整代码

4. 总结


1. 效果展示

如图所示,这次带来的是一个有趣的“擦除”效果,也可以叫做打字机效果,其中一段文本从左到右逐渐从无到有的显示出来。

 

2.  思路分析

目标:使文本从不可见到逐渐显现,且有一定的过渡效果。

2.1 难点

难点1:使用线性渐变实现逐行显示的效果。

难点2:动画生效的前提条件是 数字类的属性。而这里控制线性渐变需要定义的是一个变量,所以这里就需要将变量转化成属性

2.2 实现思路

写下两段一模一样的文字,将第二段文字覆盖第一段文字,设置第二段文字的背景和整体背景一致,且文字透明,再设置第二段文字的线性渐变(从透明到黑色渐变)。这样第一段文字就会慢慢的显示出来,就实现了上图所示的打字机效果。

3. 代码实现

接下来我会一步一步解说每段关键代码的含义。

3.1 html部分

<div class="container"><div class="box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>ullam illo nulla molestias! Nemo corporis ex <br>blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.</p><p class="eraser"><span class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>ullam illo nulla molestias! Nemo corporis ex <br>blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.</span></p></div></div>

这里有两段一模一样的段落,其实,真正显示的是第一段,而第二段的作用实际是用它的背景来覆盖第一段文字的内容,再通过背景渐变来浮现第一段文字的内容。

3.2 css部分

 body{background: black;}p{margin: 0;}.container{font-size: 20px;color: white;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans';}.box{width: 500px;height: 500px;margin: 80px auto;position: relative;line-height: 2;}

body 设置整个背景为黑色,.container 里设置文字的大小和颜色,.box 设置居中样式,并设置相对定位,方便两段文字重叠。

 .eraser{position: absolute;inset: 0;}
.text{--p: 30%;color: transparent;background: linear-gradient(to right, transparent var(--p), black calc(var(--p) + 5px));animation: erase 5s forwards linear;}

.eraser 设置绝定位,使两段文字重叠。 .text 里设置背景的线性渐变,并用变脸 --p 来代替渐变范围,通过控制 --p 的大小来实现文字逐步展现。

@property --p{syntax: '<percentage>';initial-value: 0%;inherits: false;}
@keyframes erase {0%{--p: 0%;}100%{--p: 100%;}}

上文已经说过,要想动画生效,前提条件是动画中变化的是一个数字类属性 ,而这里的 --p 却是一个变量,所以我们需要将变量通过 property 改为属性。

3.3 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><div class="box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>ullam illo nulla molestias! Nemo corporis ex <br>blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.</p><p class="eraser"><span class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>ullam illo nulla molestias! Nemo corporis ex <br>blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.</span></p></div></div>
</body><style>body{background: black;}p{margin: 0;}.container{font-size: 20px;color: white;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans';}.box{width: 500px;height: 500px;margin: 80px auto;position: relative;line-height: 2;}.eraser{position: absolute;inset: 0;}@property --p{syntax: '<percentage>';initial-value: 0%;inherits: false;}.text{--p: 30%;color: transparent;background: linear-gradient(to right, transparent var(--p), black calc(var(--p) + 5px));animation: erase 5s forwards linear;}@keyframes erase {0%{--p: 0%;}100%{--p: 100%;}}
</style>
</html>

 

4. 总结

以上就是打字机效果的实现过程,本文参考于 渡一老师的大师课教程。如果对你有所帮助的话,不妨点赞加收藏,后面还会带来更多有趣的前端动效,关注我,不迷路😀。

更多前端动效点击下方链接↓ ↓ ↓

前端动效_借来一夜星光的博客-CSDN博客

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

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

相关文章

负载均衡服务器要怎么配置?

目录 一、概述&#xff1a; 二、硬件配置&#xff1a; 三、操作系统配置&#xff1a; 四、负载均衡软件&#xff1a; 五、网络配置&#xff1a; 六、软件安装步骤&#xff1a; 6.1 安装 Nginx 6.2 安装 LVS 6.3 安装 HAProxy 6.4 安装 Keepalived 一、概述&#xff1…

提升租赁效率的租赁小程序全解析

内容概要 在如今快节奏的生活中&#xff0c;租赁小程序俨然成为了提升租赁效率的一把利器。无论是个人还是企业&#xff0c;都会因其便捷的功能而受益。简单来说&#xff0c;租赁小程序能让繁琐的租赁流程变得轻松、高效。在这里&#xff0c;我们将带您畅游租赁小程序的海洋&a…

Docker--Docker Compose(容器编排)

什么是 Docker Compose Docker Compose是Docker官方的开源项目&#xff0c;是一个用于定义和运行多容器Docker应用程序的工具。 服务&#xff08;Service&#xff09;&#xff1a;在Docker Compose中&#xff0c;一个服务实际上可以包括若干运行相同镜像的容器实例&#xff0…

搭建docker私有化仓库Harbor

Docker私有仓库概述 Docker私有仓库介绍 Docker私有仓库是个人、组织或企业内部用于存储和管理Docker镜像的存储库。Docker默认会有一个公共的仓库Docker Hub,而与Docker Hub不同,私有仓库是受限访问的,只有授权用户才能够上传、下载和管理其中的镜像。这种私有仓库可以部…

本地视频进度加入笔记+根据进度快速锁定视频位置

本地视频进度记录快速回溯 引言 在学习的过程中, 如果我们想快速记录当前看视频的位置, 后续回溯查找就会非常方便了。 实现效果 进度记录 通过按下快捷键ctrlaltu&#xff0c; 快速记录当前视频的进度信息,然后复制到typora软件内 快速回溯 在typora软件内, 选中视频索引…

网络传输层TCP协议

传输层TCP协议 1. TCP协议介绍 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一个要对数据的传输进行详细控制的传输层协议。 TCP 与 UDP 的不同&#xff0c;在于TCP是有连接、可靠、面向字节流的。具体来说&#xff0c;TCP设置了一大…

《自动驾驶与机器人中的SLAM技术》ch7:基于 ESKF 的松耦合 LIO 系统

目录 基于 ESKF 的松耦合 LIO 系统 1 坐标系说明 2 松耦合 LIO 系统的运动和观测方程 3 松耦合 LIO 系统的数据准备 3.1 CloudConvert 类 3.2 MessageSync 类 4 松耦合 LIO 系统的主要流程 4.1 IMU 静止初始化 4.2 ESKF 之 运动过程——使用 IMU 预测 4.3 使用 IMU 预测位姿进…

LeetCode 每日一题 2025/1/6-2025/1/12

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 1/6 2274. 不含特殊楼层的最大连续楼层数1/7 3019. 按键变更的次数1/8 2264. 字符串中最大的 3 位相同数字1/9 3297. 统计重新排列后包含另一个字符串的子字符串数目 I1/10…

《解锁鸿蒙Next系统人工智能语音助手开发的关键步骤》

在当今数字化时代&#xff0c;鸿蒙Next系统与人工智能的融合为开发者带来了前所未有的机遇&#xff0c;开发一款人工智能语音助手应用更是备受关注。以下是在鸿蒙Next系统上开发人工智能语音助手应用的关键步骤&#xff1a; 环境搭建与权限申请 安装开发工具&#xff1a;首先需…

基于大语言模型的组合优化

摘要&#xff1a;组合优化&#xff08;Combinatorial Optimization, CO&#xff09;对于提高工程应用的效率和性能至关重要。随着问题规模的增大和依赖关系的复杂化&#xff0c;找到最优解变得极具挑战性。在处理现实世界的工程问题时&#xff0c;基于纯数学推理的算法存在局限…

Redis 代理( Twemproxy 或 Redis Proxy)

文章目录 TwemproxyTwemproxy 的主要特性Twemproxy 的部署架构Twemproxy 的配置示例安装 Twemproxy配置文件&#xff08;YAML 示例&#xff09;启动 Twemproxy Twemproxy 的优缺优点缺点 Redis ProxyRedis Proxy 的主要特性Redis Proxy 的部署架构Redis Proxy 的配置和使用Twem…

【数据库】Unity 使用 Sqlite 数据库

1.找到需要三个 DLL Mono.Data.Sqlite.dllSystem.Data.dllsqlite3.dll 上面两个dll可在本地unity安装目录找到&#xff1a; C:\Program Files\Unity\Hub\Editor\2022.3.xxf1c1\Editor\Data\MonoBleedingEdge\lib\mono\unityjit-win32 下面dll可在sqlite官网下载到&#xff…

冒泡排序基础与实现

目录 1. 原理图 ​编辑 2. 什么是冒泡排序 3. 工作原理 3.1 具体步骤 3.2 时间复杂度 3.3 空间复杂度 4. 代码实现 5. 总结 1. 原理图 2. 什么是冒泡排序 冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单的排序算法&#xff0c;它通过重复地遍历要排序的列表&am…

忘记了PDF文件的密码,怎么办?

PDF文件可以加密&#xff0c;大家都不陌生&#xff0c;并且大家应该也都知道PDF文件有两种密码&#xff0c;一个打开密码、一个限制编辑密码&#xff0c;因为PDF文件设置了密码&#xff0c;那么打开、编辑PDF文件就会受到限制。忘记了PDF密码该如何解密&#xff1f; PDF和offi…

SpringBoot监听器的使用方法

监听器&#xff08;Listener&#xff09;就是监听对象的创建、销毁等状态的变化以及定义一些事件发生后接下来要进行的动作。主要监听的三个域对象为&#xff1a;ServletRequest域、HttpSession域 和ServletContext域。本文通过几个简单的例子介绍一下监听器的用法。 监听 Ser…

【论文笔记】Sign Language Video Retrieval with Free-Form Textual Queries

&#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;为万世开太平。 基本信息 标题: Sign Language Video Retr…

FastGRPC 使用简介

简介 FastGRPC 是一个基于 Python 3.9 的轻量级 gRPC 框架&#xff0c;旨在简单快速高效的构建 gRPC 服务。 安装 使用 pip 安装 FastGRPC&#xff1a; pip install python-fast-grpc快速开始 创建简单的 gRPC 服务 以下是一个快速实现的示例&#xff1a; from pydantic …

openEuler22.03系统使用Kolla-ansible搭建OpenStack

Kolla-ansible 是一个利用 Ansible 自动化工具来搭建 OpenStack 云平台的开源项目&#xff0c;它通过容器化的方式部署 OpenStack 服务&#xff0c;能够简化安装过程、提高部署效率并增强系统的可维护性。 前置环境准备&#xff1a; 系统:openEuler-22.03-LTS-SP4 配置&…

记录一下vue2项目优化,虚拟列表vue-virtual-scroll-list处理10万条数据

文章目录 封装BrandPickerVirtual.vue组件页面使用组件属性 select下拉接口一次性返回10万条数据&#xff0c;页面卡死&#xff0c;如何优化&#xff1f;&#xff1f;这里使用 分页 虚拟列表&#xff08;vue-virtual-scroll-list&#xff09;&#xff0c;去模拟一个下拉的内容…

【vue】vue的基础语法--上

目录 一、Vue的模板语法 1. 学会使用VsCode 2. 文本插值 3. 使用JavaScript表达式 4. 无效 5. 原始html 二、 属性绑定 1. 属性绑定 2.简写方案 3.布尔型Attribute 4. 动态邦定多个值 三、条件渲染 1. v-if 2. v-else 3. v-else-if 4. v-show 5. v-if VS v-sho…