We are Light

马黑黑

亦是金 发表于 2024-2-7 10:32
我没有看懂 ，只能欣赏学习套用！

这个用了 mask 遮罩属性做动画，遮罩针对伪元素，用的是重复线性渐变做遮罩体

马黑黑

樵歌 发表于 2024-2-7 11:24
亏了有个鼠标

马黑黑

红影 发表于 2024-2-7 10:52
嗯嗯，所以现在的效果很好，十分平滑的运作，很漂亮

谢谢

马黑黑

红影 发表于 2024-2-7 10:51
还是用css的设计好，更容易看懂。有点怕js呢

JS庞杂得多

马黑黑

红影 发表于 2024-2-7 10:47
哈哈，黑黑对樵歌的喜好还挺了解的

樵歌自己暴露的

马黑黑

红影 发表于 2024-2-7 10:45
被遮罩的图片background: url('https://638183.freep.cn/638183/t22/10ced.jpg') no-repeat center/cover ...

一个是针对 background，一个是针对 -webkit-mask，不一样的属性

红影

马黑黑 发表于 2024-2-7 11:36
谢谢

这个效果真的非常奇妙呢

红影

马黑黑 发表于 2024-2-7 11:36
JS庞杂得多

是啊，所以能被css实现的效果更好呢

红影

马黑黑 发表于 2024-2-7 11:37
樵歌自己暴露的

这下全世界都发现他的秘密了

红影

马黑黑 发表于 2024-2-7 11:38
一个是针对 background，一个是针对 -webkit-mask，不一样的属性

哦哦，知道了，为防止平铺，这两个都需要设置呢

马黑黑

红影 发表于 2024-2-7 12:39
哦哦，知道了，为防止平铺，这两个都需要设置呢

各管各的，不要混同在一起理解

马黑黑

红影 发表于 2024-2-7 12:39
这下全世界都发现他的秘密了

没关系，像东篱那么含蓄，让人摸不着头脑也不好

马黑黑

红影 发表于 2024-2-7 12:37
是啊，所以能被css实现的效果更好呢

CSS不是做的最好，很多它做不来的，关键在浏览器原生对它完美支持，简单的动画用CSS做还是不错的

马黑黑

红影 发表于 2024-2-7 12:36
这个效果真的非常奇妙呢

再次感谢

清茶煮雪

红影 发表于 2024-2-7 09:39
好奇妙的效果，用遮罩让被替换的图图仿佛带上了电视雪花一样的线条效果，后面的背景还若隐若现的。这样的遮 ...

看见影说有奇效，换了浏览器来欣赏这下又看见美女了

清茶煮雪

这也太神奇了，代码也能做出动画里面的场景元素效果

清茶煮雪

黑黑老师，技术专业大师级的佩服

红影

马黑黑 发表于 2024-2-7 13:02
各管各的，不要混同在一起理解

知道了，虽然命令是一样的，但是用在不同的环境里。

红影

马黑黑 发表于 2024-2-7 13:03
没关系，像东篱那么含蓄，让人摸不着头脑也不好

含蓄的其实本质也一样

红影

马黑黑 发表于 2024-2-7 13:04
CSS不是做的最好，很多它做不来的，关键在浏览器原生对它完美支持，简单的动画用CSS做还是不错的

很多简单的动画也很美的呢