svg动图遮罩+渐变背景
<style>.ma {
position: relative;
margin: 20px auto;
width: 700px;
height: 400px;
background: url('https://638183.freep.cn/638183/small/playbg1.jpg') no-repeat center/cover;
}
.ma::before {
position: absolute;
content: '00000';
width: 100%;
height: 100%;
background: linear-gradient(45deg, beige, white, orange, yellow) ;
mask: url('https://638183.freep.cn/638183/web/svg/balls1.svg') no-repeat center/100% 100%;
}
</style>
<div class="ma"></div> <style>
.codebox {
margin: 20px 10px;
padding: 10px 12px;
background: beige;
box-shadow: 0 0 1px rgba(0,0,0,.9);
position: relative;
}
.codebox li {
font: normal 16px/20px Consolas, 'Courier New', 'Andale Mono', monospace;
white-space: pre-wrap;
tab-size: 4;
color: #000;
padding: 0 10px;
word-break:break-all;
}
</style>
<p>代码：</p>
<div id="cDiv">
<style>
.ma {
position: relative;
margin: 20px auto;
width: 700px;
height: 400px;
background: url('https://638183.freep.cn/638183/small/playbg1.jpg') no-repeat center/cover;
}
.ma::before {
position: absolute;
content: '00000';
width: 100%;
height: 100%;
background: linear-gradient(45deg, beige, white, orange, yellow) ;
mask: url('https://638183.freep.cn/638183/web/svg/balls1.svg') no-repeat center/100% 100%;
}
</style>
<div class="ma"></div>
</div>
<script>
addLineNumber(cDiv);
function addLineNumber(elm) {
if (!elm instanceof Element) return;
elm.classList.add('codebox');
const lines = elm.innerHTML.trim().split('\n');
const total = lines.length;
const ol = document.createElement('ol');
lines.forEach( (line, key) => {
const li = document.createElement('li');
li.innerHTML = line;
ol.appendChild(li);
});
elm.innerHTML = '';
elm.appendChild(ol);
}
</script> 小球效果用伪元素呈现：
用 SVG 动图做遮罩（前景）作用于线性渐变背景。背景仅呈现小球的形状，小球自身的颜色消失，转而使用渐变颜色，且随着移动而不断变换颜色。 马黑黑 发表于 2025-8-2 21:31
小球效果用伪元素呈现：
用 SVG 动图做遮罩（前景）作用于线性渐变背景。背景仅呈现小球的形状 ...
也就是，小球走到渐变的什么位置，就体现那个位置的颜色。 把渐变换成你那个《田园风光》的背景，就变这样
<style>
.hy {
position: relative;
margin: 20px auto;
width: 700px;
height: 400px;
background: url('https://638183.freep.cn/638183/small/playbg1.jpg') no-repeat center/cover;
}
.hy::before {
position: absolute;
content: '00000';
width: 100%;
height: 100%;
background: url('https://638183.freep.cn/638183/t24/6/lauda.jpg') no-repeat center/cover;
mask: url('https://638183.freep.cn/638183/web/svg/balls1.svg') no-repeat center/100% 100%;
}
</style>
<div class="hy"></div> 遮罩真的太奇妙了，渐变的遮罩更奇妙。 红影 发表于 2025-8-2 22:08
遮罩真的太奇妙了，渐变的遮罩更奇妙。
渐变+遮罩。这个演示，渐变是背景，而遮罩总是前景 红影 发表于 2025-8-2 22:04
也就是，小球走到渐变的什么位置，就体现那个位置的颜色。
对 老鹰形状那个是静态遮罩，这个是动态遮罩，都有意想不到的效果。。。 花飞飞 发表于 2025-8-3 09:33
老鹰形状那个是静态遮罩，这个是动态遮罩，都有意想不到的效果。。。
动图静态看遮罩图而已 马黑黑 发表于 2025-8-2 22:41
渐变+遮罩。这个演示，渐变是背景，而遮罩总是前景
两者换换会怎样？ 马黑黑 发表于 2025-8-2 22:41
对
很神奇，漂亮{:4_187:} 马黑黑 发表于 2025-8-3 09:56
动图静态看遮罩图而已
{:4_170:}变幻的显得更灵动啊 花飞飞 发表于 2025-8-3 11:01
变幻的显得更灵动啊
动静皆宜 马黑黑 发表于 2025-8-3 12:00
动静皆宜
所以，老是一成不变也审美疲劳。。{:4_173:} 花飞飞 发表于 2025-8-3 20:49
所以，老是一成不变也审美疲劳。。
这是规律 马黑黑 发表于 2025-8-3 22:47
这是规律
规律是用来打破的 花飞飞 发表于 2025-8-4 13:37
规律是用来打破的
不破不立，意思就是，打不破，立不起来{:4_170:} 马黑黑 发表于 2025-8-4 13:38
不破不立，意思就是，打不破，立不起来
这么解释也通顺，
跟鸡蛋一样，破一下马上就站起来了。。
你有一项神奇的功能，胡说八道的也挺有理。{:4_170:} 花飞飞 发表于 2025-8-4 13:48
这么解释也通顺，
跟鸡蛋一样，破一下马上就站起来了。。
你有一项神奇的功能，胡说八道的也挺有理。{: ...
{:4_203:}