论坛 › 动画音画 › We are Light

马黑黑 发表于 2024-2-7 09:06

We are Light

<style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        position: relative;
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t22/t8.jpg') center/cover;
        box-shadow: 2px 4px 12px #000;
        z-index: 1;
}
#mydiv::before {
        position: absolute;
        content: '';
        inset: 0 0 0 0;
        background: url('https://638183.freep.cn/638183/t22/10ced.jpg') no-repeat center/cover;
        -webkit-mask-image: repeating-linear-gradient(to right, #000, transparent 6px);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: 0 0;
        -webkit-mask-size: 0% 100%;
        animation: maskmove 15s ease infinite alternate var(--state);
}
#mydiv:hover::before { -webkit-mask: unset; }
#mypic {
        position: absolute;
        left: 20px;
        top: 20px;
        cursor: pointer;
        mix-blend-mode: color;
        animation: rot 6s infinite linear var(--state);
}
@keyframes rot {
        to { transform: rotate(360deg); }
}
@keyframes maskmove {
0% { -webkit-mask-size: 0 100%; }
30% { -webkit-mask-size: 0 100%; }
70% { -webkit-mask-size: 100% 100%; }
100% { -webkit-mask-size: 100% 100%; }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2428456" autoplay loop></audio>
        <img id="mypic" src="https://638183.freep.cn/638183/web/svg/clover4.svg" alt="" />
</div>

<script>
var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-2-7 09:06

帖子代码
<style>
#mydiv {
        margin: 0 0 0 calc(50 - 593px);
        position: relative;
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t22/t8.jpg') center/cover;
        box-shadow: 2px 4px 12px #000;
        z-index: 1;
}
#mydiv::before {
        position: absolute;
        content: '';
        inset: 0 0 0 0;
        background: url('https://638183.freep.cn/638183/t22/10ced.jpg') no-repeat center/cover;
        -webkit-mask-image: repeating-linear-gradient(to right, #000, transparent 6px);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: 0 0;
        -webkit-mask-size: 0% 100%;
        animation: maskmove 15s ease infinite alternate var(--state);
}
#mydiv:hover::before { -webkit-mask: unset; }
#mypic {
        position: absolute;
        left: 20px;
        top: 20px;
        cursor: pointer;
        mix-blend-mode: color;
        animation: rot 6s infinite linear var(--state);
}
@keyframes rot {
        to { transform: rotate(360deg); }
}
@keyframes maskmove {
0% { -webkit-mask-size: 0 100%; }
30% { -webkit-mask-size: 0 100%; }
70% { -webkit-mask-size: 100% 100%; }
100% { -webkit-mask-size: 100% 100%; }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2428456" autoplay loop></audio>
        <img id="mypic" src="https://638183.freep.cn/638183/web/svg/clover4.svg" alt="" />
</div>

<script>
var mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-2-7 09:39

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

红影 发表于 2024-2-7 09:41

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

红影 发表于 2024-2-7 09:43

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

红影 发表于 2024-2-7 09:46

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

红影 发表于 2024-2-7 09:49

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

马黑黑 发表于 2024-2-7 09:53

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

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

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

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

马黑黑 发表于 2024-2-7 09:53

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

这是给 @樵歌 设计的，樵歌需要看清晰的{:4_170:}

红影 发表于 2024-2-7 09:56

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

马黑黑 发表于 2024-2-7 10:01

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

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

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

马黑黑 发表于 2024-2-7 10:04

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

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

马黑黑 发表于 2024-2-7 10:07

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

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

亦是金 发表于 2024-2-7 10:32

我没有看懂 ，只能欣赏学习套用！{:4_198:}

红影 发表于 2024-2-7 10:45

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

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

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

红影 发表于 2024-2-7 10:47

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

哈哈，黑黑对樵歌的喜好还挺了解的{:4_170:}

红影 发表于 2024-2-7 10:50

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

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

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

红影 发表于 2024-2-7 10:51

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

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

红影 发表于 2024-2-7 10:52

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

嗯嗯，所以现在的效果很好，十分平滑的运作，很漂亮{:4_199:}

樵歌 发表于 2024-2-7 11:24

亏了有个鼠标{:4_173:}

查看完整版本: We are Light