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>

马黑黑

小球效果用伪元素呈现：

        用 SVG 动图做遮罩（前景）作用于线性渐变背景。背景仅呈现小球的形状，小球自身的颜色消失，转而使用渐变颜色，且随着移动而不断变换颜色。

红影

马黑黑 发表于 2025-8-2 21:31
小球效果用伪元素呈现：

        用 SVG 动图做遮罩（前景）作用于线性渐变背景。背景仅呈现小球的形状 ...

也就是，小球走到渐变的什么位置，就体现那个位置的颜色。

红影

把渐变换成你那个《田园风光》的背景，就变这样

红影

遮罩真的太奇妙了，渐变的遮罩更奇妙。

马黑黑

红影 发表于 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
对

很神奇，漂亮

花飞飞

马黑黑 发表于 2025-8-3 09:56
动图静态看遮罩图而已

变幻的显得更灵动啊

马黑黑

花飞飞 发表于 2025-8-3 11:01
变幻的显得更灵动啊

动静皆宜

花飞飞

马黑黑 发表于 2025-8-3 12:00
动静皆宜

所以，老是一成不变也审美疲劳。。

马黑黑

花飞飞 发表于 2025-8-3 20:49
所以，老是一成不变也审美疲劳。。

这是规律

花飞飞

马黑黑 发表于 2025-8-3 22:47
这是规律

规律是用来打破的

马黑黑

花飞飞 发表于 2025-8-4 13:37
规律是用来打破的

不破不立，意思就是，打不破，立不起来

花飞飞

马黑黑 发表于 2025-8-4 13:38
不破不立，意思就是，打不破，立不起来

这么解释也通顺，
跟鸡蛋一样，破一下马上就站起来了。。
你有一项神奇的功能，胡说八道的也挺有理。

马黑黑

花飞飞 发表于 2025-8-4 13:48
这么解释也通顺，
跟鸡蛋一样，破一下马上就站起来了。。
你有一项神奇的功能，胡说八道的也挺有理。{: ...