css多行文本擦拭效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>多行文本擦拭效果</title><style>* {margin: 0;padding: 0;/* 指定元素的框模型类型,元素的宽度和高度会包括边框和内边距 */box-sizing: border-box;}body {background: #000;color: #fff;}.container {width: 80%;margin: 1em auto;line-height: 2;/* 文本段落行首缩进 */text-indent: 2em;position: relative;}.eraser {position: absolute;inset: 0;}.text {color: transparent;--p: 0%;background: linear-gradient(to right,#0000 var(--p),#000 calc(var(--p) + 30px));/* 动画生效 一定是一个数值类的css属性 --p初始只是变量,因此要定义为css属性 */animation: eraser 5s linear forwards;}/* 定义一个css属性   属性值规定为百分比值 初始值0% 不可继承*/@property --p {syntax: "<percentage>";initial-value: 0%;inherits: false;}@keyframes eraser {to {--p: 100%;}}</style></head><body><div class="container"><p>柔和的晨光洒在窗前,微风轻拂着花朵,带来一丝丝清新的芬芳。远处,湖面上泛起涟漪,仿佛是大自然在吟唱一首美妙的乐章。这个清晨,我站在这片宁静的土地上,感受到了生命的美妙。阳光穿过树叶的缝隙,投下斑驳的光影。树枝上的鸟儿欢快地歌唱着,它们的声音在空中飘荡,如同一曲天籁之音。我闭上眼睛,让阳光温暖我的脸庞,感受大自然的呼吸。走进花海,一片花瓣落在我的手心,柔软而香甜。花朵绽放的时刻是如此短暂,但每一朵都是那样的美丽,每一朵都有独特的芬芳。它们散发着花香,吸引着蜜蜂和蝴蝶前来品味。我凝视着花海,仿佛置身于一个梦幻的仙境。夕阳西下,天空渐渐染上了一抹橙红色。那是一种温柔而宁静的颜色,给人一种安心的感觉。我坐在湖畔,看着夕阳的余晖映照在湖面上,波光粼粼。湖水悄悄地流淌着,它带走了白昼的喧嚣,带来了夜晚的宁静。夜幕降临,星星点点的繁星闪烁在黑暗的天空中。它们如同钻石般闪耀着光芒,让人陶醉其中。我仰望着星空,感受到了无尽的宇宙之美。每一个星座都有属于自己的故事,它们在夜空中编织出一幅神奇的图案。生命的美妙就在这些平凡的瞬间中。当我们用心去感受大自然的恩赐时,我们才能真正领悟到生活的价值。无论是阳光、花朵、湖水还是星星,它们都是大自然赋予我们的礼物,提醒我们珍惜每一个瞬间。让我们用心去感受大自然的美丽,让我们珍惜生命中的每一刻。唯有这样,我们才能真正体验到生命的唯美。</p><p class="eraser"><span class="text">柔和的晨光洒在窗前,微风轻拂着花朵,带来一丝丝清新的芬芳。远处,湖面上泛起涟漪,仿佛是大自然在吟唱一首美妙的乐章。这个清晨,我站在这片宁静的土地上,感受到了生命的美妙。阳光穿过树叶的缝隙,投下斑驳的光影。树枝上的鸟儿欢快地歌唱着,它们的声音在空中飘荡,如同一曲天籁之音。我闭上眼睛,让阳光温暖我的脸庞,感受大自然的呼吸。走进花海,一片花瓣落在我的手心,柔软而香甜。花朵绽放的时刻是如此短暂,但每一朵都是那样的美丽,每一朵都有独特的芬芳。它们散发着花香,吸引着蜜蜂和蝴蝶前来品味。我凝视着花海,仿佛置身于一个梦幻的仙境。夕阳西下,天空渐渐染上了一抹橙红色。那是一种温柔而宁静的颜色,给人一种安心的感觉。我坐在湖畔,看着夕阳的余晖映照在湖面上,波光粼粼。湖水悄悄地流淌着,它带走了白昼的喧嚣,带来了夜晚的宁静。夜幕降临,星星点点的繁星闪烁在黑暗的天空中。它们如同钻石般闪耀着光芒,让人陶醉其中。我仰望着星空,感受到了无尽的宇宙之美。每一个星座都有属于自己的故事,它们在夜空中编织出一幅神奇的图案。生命的美妙就在这些平凡的瞬间中。当我们用心去感受大自然的恩赐时,我们才能真正领悟到生活的价值。无论是阳光、花朵、湖水还是星星,它们都是大自然赋予我们的礼物,提醒我们珍惜每一个瞬间。让我们用心去感受大自然的美丽,让我们珍惜生命中的每一刻。唯有这样,我们才能真正体验到生命的唯美。</span></p></div></body>
</html>

在这里插入图片描述

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

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

相关文章

亚信安全助力宁夏首个人工智能数据中心建成 铺设绿色算力安全底座

近日&#xff0c;由宁夏西云算力科技有限公司倾力打造&#xff0c;亚信安全科技股份有限公司&#xff08;股票代码&#xff1a;688225&#xff09;全力支撑&#xff0c;总投资达数十亿元人民币的宁夏智算中心项目&#xff0c;其一期工程——宁夏首个采用全自然风冷技术的30KW机…

复刻桌面小电视【包含代码分析】

宗旨&#xff1a;开源、分享、学习、进步&#xff0c;生命不息&#xff0c;折腾不止。 复刻小电视 感谢各位大佬的开源项目&#xff0c;让我有了学习的机会&#xff0c;如果侵权&#xff0c;请联系我删除。本人能力有限&#xff0c;如果有什么不对的地方&#xff0c;欢迎指正…

c/c++串的链式操作

文章目录 1.链式串的定义2.初始化3.赋值为04.赋值操作5.打印操作6.源码 本篇博客中都是带头结点的串。 1.链式串的定义 这里的数据域是4个字节&#xff0c;是为了节省空间。 typedef struct StringNode{char ch[4]; //按串长分配存储区&#xff0c;ch指向串的基地址struct S…

C++引用、内联函数、auto关键字介绍以及C++中无法使用NULL的原因

文章目录 一、引用1.1 引用概念1.2 引用特性1.3 常引用1.4 使用场景1.4.1 做参数1.4.2做返回值 1.5 引用和指针的区别1.6 小结一下 二、内联函数2.1 内联的概念2.2 内联的特性2.3 【面试题】 三、auto关键字(C11)3.1 类型别名思考3.2 auto简介 四、auto的使用细则4.1 基于范围的…

【2024年美国大学生数学建模竞赛】完整解析+模型代码+技术文档

美赛思路预定 01 美赛赛中时间分配美赛时间安排比赛前2~3天第一天&#xff08;2号&#xff09;第二天&#xff08;3号&#xff09;第三天&#xff08;4号&#xff09;第四天&#xff08;5号&#xff09;第五天&#xff08;6号&#xff09;8&#xff1a;00~10&#xff1a;00 02 …

固态硬盘颗粒,让我们了解下SLC、MLC、TLC

前文提要 近些年SSD的市场越来越好&#xff0c;大家的家用PC也逐渐都转向速度更快&#xff0c;玩游戏更流程的SSD,反而更加推动了SSD厂商的生产种类&#xff0c;但是其实大家还是挺关注SSD盘的使用寿命&#xff0c;处理数据速度&#xff0c;以及更重要的价格&#xff0c;面对市…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之TextPicker组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之TextPicker组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、TextPicker组件 TextClock组件通过文本将当前系统时间显示在设备上。支持不…

什么是回归测试?回归测试的类型和方法?

随着软件开发进程的进行&#xff0c;每一次的修改和更新都有可能引入新的问题和错误。为了确保产品质量和稳定性&#xff0c;需要进行回归测试。那么&#xff0c;什么是回归测试&#xff1f;本文将为您解答。 回归测试是指在软件代码、使用环境或产品需求发生改变时&#xff0…

【Oracle云】使用 boto3 访问 OCI 对象存储 (AWS S3协议兼容)

在现代云计算环境中&#xff0c;S3&#xff08;Simple Storage Service&#xff09;协议已经成为云对象存储的事实标准。它提供了简单、可扩展、高度耐用的存储解决方案&#xff0c;得到了广泛应用。Oracle Cloud Infrastructure&#xff08;OCI&#xff09;秉承着开放性和灵活…

C++初阶 类和对象(补充)

目录 一、友元 1.1什么是友元&#xff1f; 1.2如何使用友元&#xff1f; 1.3使用友元 1.4使用友元注意事项 二、初始化列表 2.1什么是初始化列表? 2.2为什么要有初始化列表&#xff1f; 2.3使用初始化列表 2.4注意事项 一、友元 1.1什么是友元&#xff1f; 友元是一…

大数据知识图谱之深度学习——基于BERT+LSTM+CRF深度学习识别模型医疗知识图谱问答可视化系统

文章目录 大数据知识图谱之深度学习——基于BERTLSTMCRF深度学习识别模型医疗知识图谱问答可视化系统一、项目概述二、系统实现基本流程三、项目工具所用的版本号四、所需要软件的安装和使用五、开发技术简介Django技术介绍Neo4j数据库Bootstrap4框架Echarts简介Navicat Premiu…

Windows Server 2003 DNS服务器搭建

系列文章目录 目录 系列文章目录 文章目录 前言 一、DNS服务器是什么&#xff1f; 二、配置服务器 1.实验环境搭建 2.服务器搭建 3)安装Web服务器和DNS服务器 4)查看安装是否成功 5)这里直接配置DNS服务器了,Web服务器如何配置我已经发布过了 文章目录 Windows Serve…

长时间佩戴骨传导耳机会损害听力吗?骨传导耳机有什么优点?

如果是正常的使用&#xff0c;是不会对损伤听力的&#xff0c;如果错误的使用&#xff0c;比如说高音量使用&#xff0c;长时间也会出现一定的危害&#xff0c;而且骨传导耳机相比于传统耳机&#xff0c;其优点也要多一些&#xff0c;下面一起看下骨传导耳机都有哪些优点吧。 佩…

iOS 文件分割保存加密

demo只是验证想法&#xff0c;没有做很多异常处理 默认文件是大于1KB的&#xff0c;对于小于1KB的没有做异常处理demo中文件只能分割成2个&#xff0c;可以做成可配置的N个文件分割拼接还可以使用固定的二进制数据&#xff0c;拼接文件开头或结尾 不论哪种拼法&#xff0c;目的…

redis下载与安装教程(centos下)

文章目录 一&#xff0c;redis下载1.1上传到linux服务器上 二&#xff0c;redis安装2.1 安装依赖2.2 解压包2.3 编译并安装2.4 指定配置启动2.5 设置redis开机自启 一&#xff0c;redis下载 官网&#xff1a; https://redis.io1.1上传到linux服务器上 我用filezila上传到/us…

LabVIEW核能设施监测

LabVIEW核能设施监测 在核能领域&#xff0c;确保设施运行的安全性和效率至关重要。LabVIEW通过与硬件的紧密集成&#xff0c;为高温气冷堆燃料装卸计数系统以及脉冲堆辐射剂量监测与数据管理系统提供了解决方案。这些系统不仅提高了监测和管理的精确度&#xff0c;也保证了核…

Solidworks 与 MATLAB 联合仿真

本文主要讲解了“MATLAB与SolidWorks的联合仿真怎么实现”&#xff0c;文中的讲解内容简单清晰&#xff0c;易于学习与理解&#xff0c;下面请大家跟着小编的思路慢慢深入&#xff0c;一起来研究和学习“MATLAB与SolidWorks的联合仿真怎么实现”吧&#xff01; 下载插件。 1、…

Pyth 预言机: 它们如何影响Hover?

所有链上借贷市场都使用一种称为“oracle&#xff08;预言机&#xff09;”的服务&#xff0c;为dApp提供代币定价。Oracle是一个数据系统&#xff0c;将链下信息&#xff08;例如KuCoin上的BTC/USDT价格&#xff09;传递到链上合约。从那里&#xff0c;应用程序可以支付一小笔…

react 之 UseMemo

useMemo 看个场景 下面我们的本来的用意是想基于count的变化计算斐波那契数列之和&#xff0c;但是当我们修改num状态的时候&#xff0c;斐波那契求和函数也会被执行&#xff0c;显然是一种浪费 // useMemo // 作用&#xff1a;在组件渲染时缓存计算的结果import { useState …

C#中的WebApi响应Accept头,自动返回xml或者json

Global.asax.cs中的Application_Start方法添加 GlobalConfiguration.Configuration.Formatters.Clear(); GlobalConfiguration.Configuration.Formatters.Add(new XmlMediaTypeFormatter()); GlobalConfiguration.Configuration.Formatters.Add(new JsonMediaTypeFormatter())…