We are Light

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #mydiv {
   
3.         margin: 0 0 0 calc(50 - 593px);
   
4.         position: relative;
   
5.         width: 1024px;
   
6.         height: 640px;
   
7.         background: url('https://638183.freep.cn/638183/t22/t8.jpg') center/cover;
   
8.         box-shadow: 2px 4px 12px #000;
   
9.         z-index: 1;
   
10. }
    
11. #mydiv::before {
    
12.         position: absolute;
    
13.         content: '';
    
14.         inset: 0 0 0 0;
    
15.         background: url('https://638183.freep.cn/638183/t22/10ced.jpg') no-repeat center/cover;
    
16.         -webkit-mask-image: repeating-linear-gradient(to right, #000, transparent 6px);
    
17.         -webkit-mask-repeat: no-repeat;
    
18.         -webkit-mask-position: 0 0;
    
19.         -webkit-mask-size: 0% 100%;
    
20.         animation: maskmove 15s ease infinite alternate var(--state);
    
21. }
    
22. #mydiv:hover::before { -webkit-mask: unset; }
    
23. #mypic {
    
24.         position: absolute;
    
25.         left: 20px;
    
26.         top: 20px;
    
27.         cursor: pointer;
    
28.         mix-blend-mode: color;
    
29.         animation: rot 6s infinite linear var(--state);
    
30. }
    
31. @keyframes rot {
    
32.         to { transform: rotate(360deg); }
    
33. }
    
34. @keyframes maskmove {
    
35. 0% { -webkit-mask-size: 0 100%; }
    
36. 30% { -webkit-mask-size: 0 100%; }
    
37. 70% { -webkit-mask-size: 100% 100%; }
    
38. 100% { -webkit-mask-size: 100% 100%; }
    
39. }
    
40. </style>
    
41. 
    
42. <div id="mydiv">
    
43.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2428456" autoplay loop></audio>
    
44.         <img id="mypic" src="https://638183.freep.cn/638183/web/svg/clover4.svg" alt="" />
    
45. </div>
    
46. 
    
47. <script>
    
48. var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
49. aud.addEventListener('pause', () => mState());
    
50. aud.addEventListener('playing', () => mState());
    
51. mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
    
52. </script>
    

复制代码

红影

好奇妙的效果，用遮罩让被替换的图图仿佛带上了电视雪花一样的线条效果，后面的背景还若隐若现的。这样的遮罩设计太神奇了

红影

当鼠标触碰，遮罩效果被取消，直接替换另一张图图，直接成了两张图片的来回替换。
这个没看懂，只是设置了遮罩取消，为什么能实现图片替换，不再有15秒的原本自动轮换呢？

红影

那个遮罩的设计里的-webkit-mask-repeat: no-repeat;也没看懂，本来设置了重复线性渐变，再加这句是什么意思呢？

红影

这个鼠标触碰的设计也有意思，能让人看看原本的另一张图图不加遮罩是什么样的

红影

发现个更好玩的效果：鼠标上去后本来变成了美女图，如果暂停时遮罩图运行到了一半，移开鼠标后，就显示了剩一半的遮罩图和背景图呢，非常有趣

马黑黑

红影 发表于 2024-2-7 09:43
那个遮罩的设计里的-webkit-mask-repeat: no-repeat;也没看懂，本来设置了重复线性渐变，再加这句是什么意 ...

这是针对遮罩，相当于针对背景图片，让它不重复，才可以控制遮罩渐变图片的尺寸。

而线性渐变也好，重复线性渐变也好，它们重复与否是它们自己的事情，意思是说，那是设置给它们的渐变特性性。

这是两码事：遮罩的no-repeat，规定的是遮罩图片不平铺，有我们来控制它的位置、尺寸等；渐变自身的设计，是渐变的颜色分布、占比等。

马黑黑

红影 发表于 2024-2-7 09:46
这个鼠标触碰的设计也有意思，能让人看看原本的另一张图图不加遮罩是什么样的

这是给 @樵歌 设计的，樵歌需要看清晰的

红影

好像黑黑的遮罩效果在动画设计时，都有个开始的持续一下的动作，这个是为了方便背景图的完整展示吧，再这个里面结束也有个持续时间，不知是为了什么的。
不好意思，文科生问出的问题都很浅薄，别笑话

马黑黑

红影 发表于 2024-2-7 09:41
当鼠标触碰，遮罩效果被取消，直接替换另一张图图，直接成了两张图片的来回替换。
这个没看懂，只是设置了 ...

神奇吧？惊不惊喜意不意外？

理论上，鼠标指针在帖子上，如果总不移开，那么，没有轮换出现。理由：帖子利用伪元素的遮罩做图片轮换效果，伪元素遮罩后根据这里的遮罩设计，它的图片有一部分不显示，从而露出底图的一部分。那么，如果遮罩拿开了，伪元素的图片就不会被遮挡，就全露出来，它下面的底图就没有机会显示。

马黑黑

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

还好。最初我用JS的定时器做更炫酷的遮罩，测试中发现，持续运行，动画会越来越迟缓，做多重清除定时器设置都没用。还是CSS好，虽做不出炫酷的效果，好歹总是可以平滑运行。

马黑黑

红影 发表于 2024-2-7 09:56
好像黑黑的遮罩效果在动画设计时，都有个开始的持续一下的动作，这个是为了方便背景图的完整展示吧，再这个 ...

这和开头的设计原理一样，不然会一结束马上返回，即使使用了 ease 运动曲率（ease 慢 快 慢）

亦是金

我没有看懂 ，只能欣赏学习套用！

红影

马黑黑 发表于 2024-2-7 09:53
这是针对遮罩，相当于针对背景图片，让它不重复，才可以控制遮罩渐变图片的尺寸。

而线性渐变也好，重 ...

被遮罩的图片background: url('https://638183.freep.cn/638183/t22/10ced.jpg') no-repeat center/cover;已经有不平铺了，还要在遮罩里再写一遍的么？

红影

马黑黑 发表于 2024-2-7 09:53
这是给 @樵歌 设计的，樵歌需要看清晰的

哈哈，黑黑对樵歌的喜好还挺了解的

红影

马黑黑 发表于 2024-2-7 10:01
神奇吧？惊不惊喜意不意外？

理论上，鼠标指针在帖子上，如果总不移开，那么，没有轮换出现。理由：帖 ...

让我想想，鼠标触碰就换图，那个是什么命令来着？这个只是去掉遮罩也换图图了。

红影

马黑黑 发表于 2024-2-7 10:04
还好。最初我用JS的定时器做更炫酷的遮罩，测试中发现，持续运行，动画会越来越迟缓，做多重清除定时器设 ...

还是用css的设计好，更容易看懂。有点怕js呢

红影

马黑黑 发表于 2024-2-7 10:07
这和开头的设计原理一样，不然会一结束马上返回，即使使用了 ease 运动曲率（ease 慢 快 慢）

嗯嗯，所以现在的效果很好，十分平滑的运作，很漂亮

樵歌

亏了有个鼠标