CSS高光游移文本效果
<style>.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; }
.artBox p { margin: 10px 0; }
</style>
<div class="artBox">
<p>核心：</p>
<blockquote>
<ol>
<li>渐变背景应用于文本（<mark>background-clip: text;</mark>），background-size 水平方向设为小于 100%；</li>
<li>文本前景色使用透明（transparent）或部分透明（a通道）；</li>
<li>关键帧动画使用 background-position 实现（改变背景位置）；</li>
</ol>
</blockquote>
<p>代码：</p>
<div class="hEdiv" data-prev="1"><pre class="hEpre">
<style>
body { background: #000; }
.pa {
position: absolute;
font-size: 4vw;
font-weight: bold;
background: linear-gradient(180deg, cyan, white) no-repeat 0 0 / 35% 100%;
background-clip: text;
color: rgba(250, 250, 250, .25);
text-shadow: 2px 2px 4px rgba(0, 200, 0, .15);
filter: drop-shadow(2px 2px 4px lightgreen);
animation: bmove linear 6s infinite alternate;
}
@keyframes bmove {
to { background-position: 100% 100%; }
}
</style>
<div class="pa">自古英雄出少年，似水红颜惹人怜</div>
</pre></div>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script> 【附】注意文本修饰的相关问题
由于文本使用透明或部分透明方式做前景色，文本阴影的颜色会以渗透的方式直接作用于 color 属性，这是需要考虑得设计因素。 漂亮的CSS高光游移文本效果，谢谢马老师精彩演示{:4_190:} 漂亮的CSS高光来回游移文本效果，黑黑老师辛苦了！{:4_187:} 很漂亮的效果，适合很多场景，感谢马老师分享，赞佩~~也抱走了，祝安好！{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-8-26 18:41
很漂亮的效果，适合很多场景，感谢马老师分享，赞佩~~也抱走了，祝安好！
辛苦了{:4_190:} 梦江南 发表于 2026-8-26 16:20
漂亮的CSS高光来回游移文本效果，黑黑老师辛苦了！
手掌辛苦 杨帆 发表于 2026-8-26 14:58
漂亮的CSS高光游移文本效果，谢谢马老师精彩演示
{:4_180:} 感觉这文字上都是文本的阴影色呢，很奇妙{:4_187:} 红影 发表于 2026-8-26 23:15
感觉这文字上都是文本的阴影色呢，很奇妙
这个说过了，有渗透影响。这事特意要的效果。可以试着不设置阴影。
页:
[1]