重复径向渐变+图片裁剪效果演示
本帖最后由 马黑黑 于 2025-8-17 11:10 编辑 <br /><br /><div class="codebox" data-prev="1"><style>
.box {
width: 400px;
height: 400px;
background: repeating-radial-gradient(
darkgreen 0 0.15%,
green 0 0.3%,
lightgreen 0 0.45%
);
margin: 20px auto;
position: relative;
}
.box:hover {
mask: url('https://638183.freep.cn/638183/small/hxdo.png') no-repeat center/cover;
}
.tMid {
text-align: center;
margin: 10px 0;
}
</style>
<div class="box"></div>
<p class="tMid">鼠标移到上图试试（移动设备点击）</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 真神奇，鼠标往上点就成漂亮的花形了。{:4_187:} 梦江南 发表于 2025-8-17 11:51
真神奇，鼠标往上点就成漂亮的花形了。
{:4_190:} 这是先整出了个漂亮的径向渐变背景，花纹设计好漂亮啊。。不是一般的那种圆的。。
鼠标移上去后图片遮罩发挥作用，就显示漂亮的花形轮廓 darkgreen 0 0.15%,
green 0 0.3%,
lightgreen 0 0.45%
这是用深深浅浅的细线条绿色组合起来的，原来这种方法可以整出漂亮的高级纹理 这种方式设置的重复径向渐变，得到的图案好漂亮，也好奇妙。应该是划分太细，才出现这样效果{:4_187:} 这个遮罩图也用得好，正好适应渐变图案的几个方向呢{:4_173:}{:4_187:} 红影 发表于 2025-8-17 13:05
这种方式设置的重复径向渐变，得到的图案好漂亮，也好奇妙。应该是划分太细，才出现这样效果
还可以尝试更细小的比例 红影 发表于 2025-8-17 13:05
这个遮罩图也用得好，正好适应渐变图案的几个方向呢
配套的 花飞飞 发表于 2025-8-17 12:44
这是先整出了个漂亮的径向渐变背景，花纹设计好漂亮啊。。不是一般的那种圆的。。
鼠标移上去后图片遮罩发 ...
也可以将 mask 直接用于元素CSS属性中 花飞飞 发表于 2025-8-17 12:46
darkgreen 0 0.15%,
green 0 0.3%,
lightgreen 0 0.45%
对。不嫌麻烦的话，可以使用同一种颜色，通过rgba 的 a 通道控制深浅 马黑黑 发表于 2025-8-17 13:13
还可以尝试更细小的比例
倒了一定程度的细小后，图案发生了翻天覆地的变化呢。 马黑黑 发表于 2025-8-17 13:13
配套的
的确，这个是配套的呢。十分搭配。 红影 发表于 2025-8-17 14:49
的确，这个是配套的呢。十分搭配。
{:4_190:} 红影 发表于 2025-8-17 14:48
倒了一定程度的细小后，图案发生了翻天覆地的变化呢。
所有的参数都可以考虑改一改，当然要配套，即顾及上下文或曰前后关系 马黑黑 发表于 2025-8-17 13:13
也可以将 mask 直接用于元素CSS属性中
这个看起来思路比较清晰。。那样的话是不是看着比较简洁 马黑黑 发表于 2025-8-17 13:15
对。不嫌麻烦的话，可以使用同一种颜色，通过rgba 的 a 通道控制深浅
想了一下，很奇妙 花飞飞 发表于 2025-8-17 19:33
想了一下，很奇妙
动手得到的效果可能会更奇妙 花飞飞 发表于 2025-8-17 19:32
这个看起来思路比较清晰。。那样的话是不是看着比较简洁
<p>对，很简洁。再举个栗子：</p>
<div class="codebox" data-prev="yes">
<style>
.box {
width: 400px;
height: 400px;
background: lime radial-gradient(circle, green 70%, transparent 75%, transparent) 0 0 / 15% 15%;
mask: url('https://638183.freep.cn/638183/small/hxdo.png') no-repeat center/cover;
margin: 20px auto;
position: relative;
}
</style>
<div class="box"></div>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>
马黑黑 发表于 2025-8-17 19:53
动手得到的效果可能会更奇妙
<style>
.box {
width: 400px;
height: 400px;
background: repeating-radial-gradient(
rgba(220,20,60,.3) 0 0.05%,
rgba(220,20,60,.6) 0 0.1%,
rgba(220,20,60,.9) 0 0.15%
);
margin: 20px auto;
position: relative;
}
.box:hover {
mask: url('https://638183.freep.cn/638183/small/hxdo.png') no-repeat center/cover;
}
.tMid {
text-align: center;
margin: 10px 0;
}
</style>
<div class="box"></div>
<p class="tMid">鼠标移到上图试试（移动设备点击）</p>