论坛 › 马黑黑教程专版 › 重复性渐变+背景剪裁文本特效

马黑黑 发表于 2025-8-13 12:36

重复性渐变+背景剪裁文本特效

<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">
&lt;style&gt;
        .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;
        }
&lt;/style&gt;

&lt;div class="txtBox" data-text="HUACHAO 花潮"&gt;HUACHAO 花潮&lt;/div&gt;
&lt;div class="txtBox linear" data-text="HUACHAO 花潮"&gt;HUACHAO 花潮&lt;/div&gt;
&lt;div class="txtBox conic" data-text="HUACHAO 花潮"&gt;HUACHAO 花潮&lt;/div&gt;
        </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-20 21:30

马黑黑 发表于 2025-8-19 23:17
是自然界的代码

因为人们破解不了，暂时归为仙界吧。

梦江南 发表于 2025-8-13 13:51

谢谢黑黑老师辛苦。{:4_190:}

红影 发表于 2025-8-13 14:17

好像只要设一个伪类hover交互就行了啊，后面的线性和锥形都没另外设，也能进行hover交互呢{:4_173:}

红影 发表于 2025-8-13 14:19

可以用这样的重复性渐变做歌词了呢，以前一位带斜线的文字背景需要贴图，现在卡莱可以自己做线性重复渐变，自己做的好处是可以调整，想要什么颜色什么密度的，自己就能调。
这个太好了{:4_199:}

红影 发表于 2025-8-13 14:21

锥形和径向渐变也很漂亮，还能多掺杂点颜色进去呢。像黑黑说的，调整“渐变的颜色、角度、起始位置、尺寸等，应该会创建出更为神奇的效果。”{:4_199:}

马黑黑 发表于 2025-8-13 19:12

红影 发表于 2025-8-13 14:21
锥形和径向渐变也很漂亮，还能多掺杂点颜色进去呢。像黑黑说的，调整“渐变的颜色、角度、起始位置、尺寸等 ...

可以充分发挥想象力，做出大胆的渐变效果。

可以先做背景效果，然后在使用 background-clip 属性用于文本

马黑黑 发表于 2025-8-13 19:13

红影 发表于 2025-8-13 14:19
可以用这样的重复性渐变做歌词了呢，以前一位带斜线的文字背景需要贴图，现在卡莱可以自己做线性重复渐变， ...

花朝格式的LRC系列插件都支持这些东东，关键是怎么设计渐变背景

马黑黑 发表于 2025-8-13 19:14

红影 发表于 2025-8-13 14:17
好像只要设一个伪类hover交互就行了啊，后面的线性和锥形都没另外设，也能进行hover交互呢

在一楼的例子中，所有的div都是用 .txtBox 这个CSS选择器，这就可以使用 .box:hover {} 伪类的样式。

马黑黑 发表于 2025-8-13 19:14

梦江南 发表于 2025-8-13 13:51
谢谢黑黑老师辛苦。

{:4_191:}

花飞飞 发表于 2025-8-13 21:56

这个花纹太好看了，触碰还能按设计的改变长短。。
实例中是按设计时间从0走到100，就能按歌曲时长精准到位。。

花飞飞 发表于 2025-8-13 21:57

色彩也可以根据贴子进行设计，渐变也可以设计。。。做贴子是很方便了。。
关键 是这个构思和创意，才是真正的金点子

红影 发表于 2025-8-13 22:36

马黑黑 发表于 2025-8-13 19:12
可以充分发挥想象力，做出大胆的渐变效果。

可以先做背景效果，然后在使用 background-clip 属性用于 ...

嗯嗯，调到背景效果合适了，可以用到歌词上。

红影 发表于 2025-8-13 22:38

马黑黑 发表于 2025-8-13 19:13
花朝格式的LRC系列插件都支持这些东东，关键是怎么设计渐变背景

是的，设计好了歌词就可以按照设计的背景现实了{:4_187:}

红影 发表于 2025-8-13 22:38

马黑黑 发表于 2025-8-13 19:14
在一楼的例子中，所有的div都是用 .txtBox 这个CSS选择器，这就可以使用 .box:hover {} 伪类的样式。

这个挺特别的，好像第一次知道呢{:4_187:}

马黑黑 发表于 2025-8-13 23:02

红影 发表于 2025-8-13 22:38
这个挺特别的，好像第一次知道呢

这是简单的道理：

任何一个元素都拥有 class列表，列表里可能是 0 个、 1 个或是多个class名。只要其中有一个有 :hover，那么，该元素就会运行该 :hover，若多个class 都有:hover 伪类，则会相互覆盖，只有一个起作用。

马黑黑 发表于 2025-8-13 23:02

红影 发表于 2025-8-13 22:38
是的，设计好了歌词就可以按照设计的背景现实了

{:4_181:}

马黑黑 发表于 2025-8-13 23:02

花飞飞 发表于 2025-8-13 21:57
色彩也可以根据贴子进行设计，渐变也可以设计。。。做贴子是很方便了。。
关键 是这个构思和创意，才是真 ...

{:4_190:}

马黑黑 发表于 2025-8-13 23:03

花飞飞 发表于 2025-8-13 21:56
这个花纹太好看了，触碰还能按设计的改变长短。。
实例中是按设计时间从0走到100，就能按歌曲时长精准到位 ...

{:4_181:}

花飞飞 发表于 2025-8-14 16:19

马黑黑 发表于 2025-8-13 23:02


茶水好喝{:4_173:}咖啡也好喝。。白开水最解渴

花飞飞 发表于 2025-8-14 16:20

马黑黑 发表于 2025-8-13 23:03


脑袋太灵光啦。。设计之美

查看完整版本: 重复性渐变+背景剪裁文本特效