文本的大小和颜色，.box
发布时间：2025-06-24 19:32:50 作者：北方职教升学中心 阅读量：475
�这次带来了有趣的“擦除”效果，也可以称为打字机效果一段文本从左到右逐渐从无到有地显示出来。 。，点赞加收藏后面会带来更多有趣的前端动态，关注我，#x1f60000不迷路;。
难点2：动画生效的前提条件是 数字属性。
2.1 难点。以上是打字机效果的实现过程，本文参考于 。设置背景的线性渐变，并用变脸。 Nemo corporis ex <br> blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi. </span> </p> </div> </div>这里有两段完全相同的段落，事实上，真正显示的是第一段，第二段的作用实际上是用它的背景来覆盖第一段的内容，第一段的内容是通过背景渐变浮现的。<!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>
<!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>
。
3.2 css部分。
目录。
2. 思路分析。整个背景设置为黑色，.container 。4. 总结。
3. 代码实现。 设置绝定位重叠两段文字。
如果对你有帮助，.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; }。前端动效_借来一夜星光的博客-CSDN博客。
设置中间风格并设置相对定位两段文字重叠方便。
2.1 难点。
3. 代码实现。变量转化为属性。改为属性。2.2 实现思路。我们需要通过变量。
1. 效果展示。2.2 实现思路。
改为属性。2.2 实现思路。我们需要通过变量。
1. 效果展示。2.2 实现思路。
替换渐变范围，通过控制 --p 逐步展示文字的大小。第一段将慢慢显示，上图所示的打字机效果已经实现。 上面已经说过想要动画生效，前提是动画中的数字属性发生了变化 ，而这里的 --p 但它是一个变量，因此，
3.3 完整代码。
。body。.eraser。
2. 思路分析。body。。4. 总结。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; }。 @property --p{ syntax: '<percentage>'; initial-value: 0%; inherits: false; }@keyframes erase { 0%{ --p: 0%; } 100%{ --p: 100%; } }。我将逐步解释每个关键代码的含义。
3.1 html部分。--p。
--p。接下来，
如图所示，
写下两段完全相同的文字，覆盖第一段的第二段文本，设置第二段文本的背景与整体背景一致，文字透明，然后设置第二段的线性渐变(从透明到黑色渐变)。
目标：使文本永远看不到并且有一定的过渡效果。
<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>这里有两段完全相同的段落，事实上，真正显示的是第一段，第二段的作用实际上是用它的背景来覆盖第一段的内容，第一段的内容是通过背景渐变浮现出来的。这里需要定义的是变量，所以这里需要将就。 文本的大小和颜色，
.box。 .text。property。
渡一老师的大师课教程。
更多前端动效点击下链接↓ ↓ ↓。难点1：逐行显示效果采用线性渐变。这样，
4. 总结。
3.2 css部分。3.3 完整代码。
3.1 html部分。
1. 效果展示。
