请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
重复性渐变背景设计得好可以产生不同形状的花纹效果，而通过背景剪裁background-clip: text;的属性设置能将花纹贴到文字之上构成美妙的文本特效。以下代码演示了三种重复性渐变+背景剪裁创建而成的文本效果，可以在线预览。实现思路是：主元素+伪元素文本叠加，伪元素使用重复性渐变背景并通过背景剪裁修饰文本。示例中还设计了hover伪类交互以帮助查看效果中的图案。
<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); /* 伪元素文本 */
width: 100%;
height: 100%;
color: transparent; /* 前景色必须带透明 */
/* 重复径向渐变 ：尺寸 5% */
background: repeating-radial-gradient(
transparent,
red,
transparent 5%
);
background-clip: text;
white-space: pre;
overflow: hidden;
transition: 2s;
}
.txtBox:hover::before { width: 50%; }
/* 重复线性渐变 ：尺寸 5% */
.linear::before {
background: repeating-linear-gradient(
45deg,
transparent,
red,
transparent 5%
);
background-clip: text; /* 改变了背景要重设背景剪裁，下同 */
}
/* 重复锥形渐变 ：尺寸 5% */
.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>
修改一些数据，例如，重复性渐变的尺寸，渐变的颜色、角度、起始位置，应该会创建出更为神奇的效果。
此类文本外观属性的修饰可以不需要伪元素，直接在主元素上操作也可。使用伪元素是为了让文本多一个底色。
| 
发表于 2025-8-13 12:36
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2025-8-13 13:51
楼主
