重复性渐变+背景剪裁文本特效
<style>.artBox { font-size: 18px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
.artBox h5 { font-size: 18px; margin: 6px 0; }
</style>
<div id="prevBox"></div>
<div class="artBox">
<p>重复性渐变背景设计得好可以产生不同形状的花纹效果，而通过背景剪裁<mark>background-clip: text;</mark>的属性设置能将花纹贴到文字之上构成美妙的文本特效。以下代码演示了三种重复性渐变+背景剪裁创建而成的文本效果，可以在线预览。实现思路是：主元素+伪元素文本叠加，伪元素使用重复性渐变背景并通过背景剪裁修饰文本。示例中还设计了hover伪类交互以帮助查看效果中的图案。</p>
<div class="codebox" data-title="CSS+HTML代码：" data-prev="1">
<style>
.txtBox {
margin: 20px auto;
width: fit-content;
height: fit-content;
font-size: 60px;
font-weight: bold;
color: #525252;
position: relative;
}
.txtBox::before {
position: absolute;
content: attr(data-text); <txt-green>/* 伪元素文本 */</txt-green>
width: 100%;
height: 100%;
color: transparent; <txt-green>/* 前景色必须带透明 */</txt-green>
<txt-green>/* 重复径向渐变 ：尺寸 5% */</txt-green>
background: repeating-radial-gradient(
transparent,
red,
transparent 5%
);
background-clip: text;
white-space: pre;
overflow: hidden;
transition: 2s;
}
.txtBox:hover::before { width: 50%; }
<txt-green>/* 重复线性渐变 ：尺寸 5% */</txt-green>
.linear::before {
background: repeating-linear-gradient(
45deg,
transparent,
red,
transparent 5%
);
background-clip: text; <txt-green>/* 改变了背景要重设背景剪裁，下同 */</txt-green>
}
<txt-green>/* 重复锥形渐变 ：尺寸 5% */</txt-green>
.conic::before {
background: repeating-conic-gradient(
transparent,
red,
transparent 5%
);
background-clip: text;
}
</style>
<div class="txtBox" data-text="HUACHAO 花潮">HUACHAO 花潮</div>
<div class="txtBox linear" data-text="HUACHAO 花潮">HUACHAO 花潮</div>
<div class="txtBox conic" data-text="HUACHAO 花潮">HUACHAO 花潮</div>
</div>
<p>修改一些数据，例如，重复性渐变的尺寸，渐变的颜色、角度、起始位置，应该会创建出更为神奇的效果。</p>
<p>此类文本外观属性的修饰可以不需要伪元素，直接在主元素上操作也可。使用伪元素是为了让文本多一个底色。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 马黑黑 发表于 2025-8-19 23:17
是自然界的代码
因为人们破解不了，暂时归为仙界吧。 谢谢黑黑老师辛苦。{:4_190:} 好像只要设一个伪类hover交互就行了啊，后面的线性和锥形都没另外设，也能进行hover交互呢{:4_173:} 可以用这样的重复性渐变做歌词了呢，以前一位带斜线的文字背景需要贴图，现在卡莱可以自己做线性重复渐变，自己做的好处是可以调整，想要什么颜色什么密度的，自己就能调。
这个太好了{:4_199:} 锥形和径向渐变也很漂亮，还能多掺杂点颜色进去呢。像黑黑说的，调整“渐变的颜色、角度、起始位置、尺寸等，应该会创建出更为神奇的效果。”{:4_199:} 红影 发表于 2025-8-13 14:21
锥形和径向渐变也很漂亮，还能多掺杂点颜色进去呢。像黑黑说的，调整“渐变的颜色、角度、起始位置、尺寸等 ...
可以充分发挥想象力，做出大胆的渐变效果。
可以先做背景效果，然后在使用 background-clip 属性用于文本 红影 发表于 2025-8-13 14:19
可以用这样的重复性渐变做歌词了呢，以前一位带斜线的文字背景需要贴图，现在卡莱可以自己做线性重复渐变， ...
花朝格式的LRC系列插件都支持这些东东，关键是怎么设计渐变背景 红影 发表于 2025-8-13 14:17
好像只要设一个伪类hover交互就行了啊，后面的线性和锥形都没另外设，也能进行hover交互呢
在一楼的例子中，所有的div都是用 .txtBox 这个CSS选择器，这就可以使用 .box:hover {} 伪类的样式。 梦江南 发表于 2025-8-13 13:51
谢谢黑黑老师辛苦。
{:4_191:} 这个花纹太好看了，触碰还能按设计的改变长短。。
实例中是按设计时间从0走到100，就能按歌曲时长精准到位。。
色彩也可以根据贴子进行设计，渐变也可以设计。。。做贴子是很方便了。。
关键 是这个构思和创意，才是真正的金点子 马黑黑 发表于 2025-8-13 19:12
可以充分发挥想象力，做出大胆的渐变效果。
可以先做背景效果，然后在使用 background-clip 属性用于 ...
嗯嗯，调到背景效果合适了，可以用到歌词上。 马黑黑 发表于 2025-8-13 19:13
花朝格式的LRC系列插件都支持这些东东，关键是怎么设计渐变背景
是的，设计好了歌词就可以按照设计的背景现实了{:4_187:} 马黑黑 发表于 2025-8-13 19:14
在一楼的例子中，所有的div都是用 .txtBox 这个CSS选择器，这就可以使用 .box:hover {} 伪类的样式。
这个挺特别的，好像第一次知道呢{:4_187:} 红影 发表于 2025-8-13 22:38
这个挺特别的，好像第一次知道呢
这是简单的道理：
任何一个元素都拥有 class列表，列表里可能是 0 个、 1 个或是多个class名。只要其中有一个有 :hover，那么，该元素就会运行该 :hover，若多个class 都有:hover 伪类，则会相互覆盖，只有一个起作用。 红影 发表于 2025-8-13 22:38
是的，设计好了歌词就可以按照设计的背景现实了
{:4_181:} 花飞飞 发表于 2025-8-13 21:57
色彩也可以根据贴子进行设计，渐变也可以设计。。。做贴子是很方便了。。
关键 是这个构思和创意，才是真 ...
{:4_190:} 花飞飞 发表于 2025-8-13 21:56
这个花纹太好看了，触碰还能按设计的改变长短。。
实例中是按设计时间从0走到100，就能按歌曲时长精准到位 ...
{:4_181:} 马黑黑 发表于 2025-8-13 23:02
茶水好喝{:4_173:}咖啡也好喝。。白开水最解渴 马黑黑 发表于 2025-8-13 23:03
脑袋太灵光啦。。设计之美