文章目录
- 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;/* 是否可以集成 */}
