【日常记录】【CSS】css文字渐变擦除

news/2024/6/20 4:11:57/文章来源:https://blog.csdn.net/qq_45634593/article/details/137039001

文章目录

    • 1、代码
    • 2、自定义css属性

1、代码

在这里插入图片描述

主要思路是:
1、弄一个一样的,覆盖到上面去
2、然后改一下文字颜色,改成透明,背景颜色改成 渐变,可以从透明到一个实色,这样就能显示出来下面的文字
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><style>* {margin: 0;padding: 0;}body {background-color: black;}.content {position: relative;}.mask {position: absolute;top: 0;left: 0;}.mask span {--gap: 0%;/* 把文字弄成透明的,然后 背景弄成渐变 *//* background: linear-gradient(to right, #0000 10%, #000 20%); */background: linear-gradient(to right, #0000 var(--gap), #000 calc(var(--gap) + 100px));color: transparent;/* 会没有动画,因为 --gap 不是css属性,动画的要求是 数值类的css属性改变 */animation: gapAnimation 20s ease forwards;}p {color: #fff;line-height: 1.6;}/* css 自定义属性名称需要,用 -- 开头 */@property --gap {/* 语法规则 */syntax: '<percentage>';/* 默认值 */initial-value: 0%;inherits: false;/* 是否可以集成 */}@keyframes gapAnimation {0% {--gap: 0%;}100% {--gap: 100%;}}</style>
</head><body><div class="content"><p>当晨曦初现,透过窗外洒进来的光芒温暖而柔和,唤醒了沉睡中的城市。街道上,清晨的繁忙已经开始,行人匆匆而过,车辆来往穿梭,构成一幅忙碌而有序的画面。远处的高楼大厦在晨雾中若隐若现,仿佛是一座梦幻般的城堡。空气中弥漫着咖啡的香气,让人精神为之一振。城市的喧嚣与宁静交织在一起,构成了一幅现代都市的生动画卷,每一个细节都在述说着这座城市独特的故事。当晨曦初现,透过窗外洒进来的光芒温暖而柔和,唤醒了沉睡中的城市。街道上,清晨的繁忙已经开始,行人匆匆而过,车辆来往穿梭,构成一幅忙碌而有序的画面。远处的高楼大厦在晨雾中若隐若现,仿佛是一座梦幻般的城堡。空气中弥漫着咖啡的香气,让人精神为之一振。城市的喧嚣与宁静交织在一起,构成了一幅现代都市的生动画卷,每一个细节都在述说着这座城市独特的故事。当晨曦初现,透过窗外洒进来的光芒温暖而柔和,唤醒了沉睡中的城市。街道上,清晨的繁忙已经开始,行人匆匆而过,车辆来往穿梭,构成一幅忙碌而有序的画面。远处的高楼大厦在晨雾中若隐若现,仿佛是一座梦幻般的城堡。空气中弥漫着咖啡的香气,让人精神为之一振。城市的喧嚣与宁静交织在一起,构成了一幅现代都市的生动画卷,每一个细节都在述说着这座城市独特的故事。</p><p class="mask"><span>当晨曦初现,透过窗外洒进来的光芒温暖而柔和,唤醒了沉睡中的城市。街道上,清晨的繁忙已经开始,行人匆匆而过,车辆来往穿梭,构成一幅忙碌而有序的画面。远处的高楼大厦在晨雾中若隐若现,仿佛是一座梦幻般的城堡。空气中弥漫着咖啡的香气,让人精神为之一振。城市的喧嚣与宁静交织在一起,构成了一幅现代都市的生动画卷,每一个细节都在述说着这座城市独特的故事。当晨曦初现,透过窗外洒进来的光芒温暖而柔和,唤醒了沉睡中的城市。街道上,清晨的繁忙已经开始,行人匆匆而过,车辆来往穿梭,构成一幅忙碌而有序的画面。远处的高楼大厦在晨雾中若隐若现,仿佛是一座梦幻般的城堡。空气中弥漫着咖啡的香气,让人精神为之一振。城市的喧嚣与宁静交织在一起,构成了一幅现代都市的生动画卷,每一个细节都在述说着这座城市独特的故事。当晨曦初现,透过窗外洒进来的光芒温暖而柔和,唤醒了沉睡中的城市。街道上,清晨的繁忙已经开始,行人匆匆而过,车辆来往穿梭,构成一幅忙碌而有序的画面。远处的高楼大厦在晨雾中若隐若现,仿佛是一座梦幻般的城堡。空气中弥漫着咖啡的香气,让人精神为之一振。城市的喧嚣与宁静交织在一起,构成了一幅现代都市的生动画卷,每一个细节都在述说着这座城市独特的故事。</span></p></div>
</body></html>

2、自定义css属性

    /* css 自定义属性名称需要,用 -- 开头 */@property --gap {/* 语法规则 */syntax: '<percentage>';/* 默认值 */initial-value: 0%;inherits: false;/* 是否可以集成 */}

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

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

相关文章

百度网站收录提交入口

百度网站收录提交入口 在网站刚建立或者更新内容后&#xff0c;及时将网站提交给搜索引擎是提高网站曝光和获取流量的重要步骤之一。百度作为中国最大的搜索引擎之一&#xff0c;网站在百度中的收录情况尤为重要。下面介绍一下如何通过百度的网站收录提交入口提交网站。 1. 百…

C#手术麻醉系统源码 大型医院手麻系统4大需求是什么?

C#手术麻醉系统源码 大型医院手麻系统4大需求是什么&#xff1f; 手术麻醉临床信息系统有着完善的临床业务功能&#xff0c;能够涵盖整个围术期的工作&#xff0c;能够采集、汇总、存储、处理、展 现所有的临床诊疗资料。通过该系统的实施&#xff0c;能够规范手麻科的工作流程…

PTA L2-045 堆宝塔

堆宝塔游戏是让小朋友根据抓到的彩虹圈的直径大小&#xff0c;按照从大到小的顺序堆起宝塔。但彩虹圈不一定是按照直径的大小顺序抓到的。聪明宝宝采取的策略如下&#xff1a; 首先准备两根柱子&#xff0c;一根 A 柱串宝塔&#xff0c;一根 B 柱用于临时叠放。把第 1 块彩虹圈…

MATLAB科研绘图与学术图表绘制从入门到精通

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

Mybatis plue(二) 核心功能

核心功能 P5 条件构造器 mybatisplus支持各种复杂的where条件&#xff0c;可以满足日常开发的所有需求 wrapper就是条件构造器,wrapper就是顶层的&#xff0c; 示例&#xff1a; 查询出名字带0&#xff0c;存款大于等于1000的人的id,username,info,balance字段 Testvoid te…

Oracle Cloud公布 | 每小时 126 亿次 SQL 数据库查询

广而告之&#xff1a;2024 年数据技术嘉年华大会将于 4 月12-13 日在北京召开&#xff0c;春暖花开之际&#xff0c;数据库行业蓬勃发展之时&#xff0c;广邀天下豪杰&#xff0c;相聚北京&#xff0c;共论数据库技术发展的创新与未来。 注册&#xff1a;https://www.modb.pro/…

Adaboost集成学习 | Matlab实现基于GRU-Adaboost门控循环单元结合Adaboost集成学习时间序列预测(股票价格预测)

目录 效果一览基本介绍模型设计程序设计参考资料效果一览 基本介绍 Adaboost集成学习 | Matlab实现基于GRU-Adaboost门控循环单元结合Adaboost集成学习时间序列预测(股票价格预测) 模型设计 股票价格预测是一个具有挑战性的时间序列预测问题,可以使用深度学习模型如门控循环…

安卓Android 架构模式及UI布局设计

文章目录 一、Android UI 简介1.1 在手机UI设计中&#xff0c;坚持的原则是什么1.2 安卓中的架构模式1.2.1 MVC (Model-View-Controller)设计模式优缺点 1.2.2 MVP(Model-View-Presenter)设计模式MVP与MVC关系&#xff1a; 1.2.3 MVVM(Model—View—ViewModel ) 设计模式1.2.4 …

视觉里程计之对极几何

视觉里程计之对极几何 前言 上一个章节介绍了视觉里程计关于特征点的一些内容&#xff0c;相信大家对视觉里程计关于特征的描述已经有了一定的认识。本章节给大家介绍视觉里程计另外一个概念&#xff0c;对极几何。 对极几何 对极几何是立体视觉中的几何关系&#xff0c;描…

政务AI交互数字人推动政务“人工智能+”建设

传统的政务平台大多是单向与用户互动&#xff0c;缺乏即时反馈&#xff0c;导致用户需要花费大量时间理解信息&#xff0c;并难以提出问题得到及时解答。 AI交互数字人凭借其智能性&#xff0c;可以在政务网页、政务业务办理大厅一体机、政务APP/小程序等终端设备中&#xff0…

OSPF中配置静态路由实验简述

静态路由协议和OSPF&#xff08;开放最短路径优先&#xff09;协议是两种常见的路由协议&#xff0c;它们在路由选择和网络管理方面有一些区别。他们可以共存。 静态路由协议需要手动配置路由表&#xff0c;不会自动适应网络拓扑变化&#xff0c;适用于小型网络或者网络拓扑变化…

非关系型数据库(缓存数据库)redis的基础认知与安装

目录 一.关系型数据库和非关系型数据库 关系型数据库 非关系型数据库 关系数据库与非关系型数据库的区别 ①非关系数据 关系型数据库 非关系型数据库产生背景 数据存储流向 非关系型数据库 关系数据库 二.redis的简介 1.概念 2.Redis 具有以下几个优点: 3.Redi…

香港科技大学广州|数据科学与分析学域硕博招生宣讲会—天津大学专场

时间&#xff1a;2024年4月12日&#xff08;星期五&#xff09;14:00 地点&#xff1a;天津大学北洋园校区55楼B204 报名链接&#xff1a;https://www.wjx.top/vm/Q0cKTUI.aspx# 跨学科研究领域 *数据驱动的人工智能和机器学习 *统计学习和建模 工业和商业分析 *特定行业的数…

java 8 stream api将List<T>转换成树形结构

1、新建实体类 package com.example.springboot3.entity;import lombok.Builder; import lombok.Data;import java.util.List;Data Builder public class Menu {/*** id*/public Integer id;/*** 名称*/public String name;/*** 父id &#xff0c;根节点为0*/public Integer p…

Python深度学习034:cuda的环境如何配置

文章目录 1.安装nvidia cuda驱动CMD中看一下cuda版本:下载并安装cuda驱动2.创建虚拟环境并安装pytorch的torch_cuda3.测试附录1.安装nvidia cuda驱动 CMD中看一下cuda版本: 注意: 红框的cuda版本,是你的显卡能装的最高的cuda版本,所以可以选择低于它的版本。比如我的是11…

【2023】kafka入门学习与使用(kafka-2)

目录&#x1f4bb; 一、基本介绍1、产生背景2、 消息队列介绍2.1、消息队列的本质作用2.2、消息队列的使用场景2.3、消息队列的两种模式2.4、消息队列选型&#xff1a; 二、kafka组件1、核心组件概念2、架构3、基本使用3.1、消费消息3.2、单播和多播消息的实现 4、主题和分区4.…

AR智能眼镜解决方案_MTK平台安卓主板硬件芯片方案开发

AR智能眼镜&#xff0c;是一个可以让现场作业更智能的综合管控设备。采用移动互联网、大数据和云计算等技术&#xff0c;现场数据的采集与分析&#xff1b;同时实现前端现场作业和后端管理的实时连动、信息的同步传输与存储。让前端现场作业更加智能&#xff0c;后端管理更加高…

Java8 Stream API全面解析——高效流式编程的秘诀

文章目录 什么是 Stream Api?快速入门流的操作创建流中间操作filter 过滤map 数据转换flatMap 合并流distinct 去重sorted 排序limit 限流skip 跳过peek 操作 终结操作forEach 遍历forEachOrdered 有序遍历count 统计数量min 最小值max 最大值reduce 聚合collect 收集anyMatch…

6.8物联网RK3399项目开发实录-驱动开发之RTC实时时钟的使用(wulianjishu666)

90款行业常用传感器单片机程序及资料【stm32,stc89c52,arduino适用】 链接&#xff1a;https://pan.baidu.com/s/1M3u8lcznKuXfN8NRoLYtTA?pwdc53f RTC 使用 简介 AIO-3399J 开发板上有 一个集成于 RK808 上的RTC(Real Time Clock)&#xff0c;主要功能有时钟&#xff0c…

Linux-3 yum和vim

目录 本节目标&#xff1a; Linux 软件包管理器 yum 什么是软件包 1.yum是什么&#xff1f;软件包&#xff1f; 2.Linux(centos)的生态 3.yum的相关操作 我怎么知道我应该安装什么软件&#xff1f; 4.yum的本地配置 关于 rzsz 查看软件包 Linux编辑器-vim使用 1.v…