论坛 › 动画音画 › 姬神 - 光明的日子

马黑黑 发表于 2023-12-25 12:15

姬神 - 光明的日子

<style>
#papa {
        margin: 10px 0 10px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t23/webp2/glri.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        overflow: hidden;
        display: grid;
        place-items: center;
        position: relative;
        z-index: 1;
}
#mypic {
        position: absolute;
        mix-blend-mode: exclusion;
        cursor: pointer;
        transition: filter 1s;
        animation: rot 6s infinite linear var(--state);
}
#mypic:hover {
        filter: invert(100%) drop-shadow(4px 4px 20px snow);
}
li-zi {
        position: absolute;
        width: 50px;
        height: 1px;
        background: linear-gradient(to right,snow,yellow);
        animation: moving var(--du) var(--de) infinite linear var(--state);
}
@keyframes moving {
        from { transform: translate(0,0) rotate(var(--deg)); opacity: 0; }
        to { transform: translate(var(--xx),var(--yy)) rotate(var(--deg)); opacity: 1; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <img id="mypic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" title="暂停/播放" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=26178034" autoplay loop></audio>
</div>

<script>

(function() {

let total = 160;
Array.from({length: total}).forEach((lz,key) => {
        lz = document.createElement('li-zi');
        let hudu = Math.PI / 180 * 360 / total * key;
        let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
        lz.style.cssText += `
                --xx: ${xx}px;
                --yy: ${yy}px;
                --deg: ${360 / total * key}deg;
                --du: ${2 + Math.random() * 2}s;
                --de: -${Math.random() * 3}s;
        `;
        papa.prepend(lz);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>

马黑黑 发表于 2023-12-25 12:17

帖子代码
<style>
#papa {
        margin: 10px 0 10px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t23/webp2/glri.webp') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        overflow: hidden;
        display: grid;
        place-items: center;
        position: relative;
        z-index: 1;
}
#mypic {
        position: absolute;
        mix-blend-mode: exclusion;
        cursor: pointer;
        transition: filter 1s;
        animation: rot 6s infinite linear var(--state);
}
#mypic:hover {
        filter: invert(100%) drop-shadow(4px 4px 20px snow);
}
li-zi {
        position: absolute;
        width: 50px;
        height: 1px;
        background: linear-gradient(to right,snow,yellow);
        animation: moving var(--du) var(--de) infinite linear var(--state);
}
@keyframes moving {
        from { transform: translate(0,0) rotate(var(--deg)); opacity: 0; }
        to { transform: translate(var(--xx),var(--yy)) rotate(var(--deg)); opacity: 1; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <img id="mypic" src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" title="暂停/播放" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=26178034" autoplay loop></audio>
</div>

<script>
let total = 160;
Array.from({length: total}).forEach((lz,key) => {
        lz = document.createElement('li-zi');
        let hudu = Math.PI / 180 * 360 / total * key;
        let xx = 800 * Math.cos(hudu), yy = 800 * Math.sin(hudu);
        lz.style.cssText += `
                --xx: ${xx}px;
                --yy: ${yy}px;
                --deg: ${360 / total * key}deg;
                --du: ${2 + Math.random() * 2}s;
                --de: -${Math.random() * 3}s;
        `;
        papa.prepend(lz);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2023-12-25 12:56

金光万道，真壮观{:4_199:}

红影 发表于 2023-12-25 12:59

播放器按钮鼠标划过还能颜色反转，漂亮{:4_187:}

红影 发表于 2023-12-25 13:07

播放器鼠标上去前后的颜色和背景的那块颜色还挺配，真奇妙{:4_199:}

幸运草 发表于 2023-12-25 13:56

介个不用歌词，太好了{:6_242:}

马黑黑 发表于 2023-12-25 17:44

幸运草 发表于 2023-12-25 13:56
介个不用歌词，太好了

纯音乐

马黑黑 发表于 2023-12-25 17:50

红影 发表于 2023-12-25 12:59
播放器按钮鼠标划过还能颜色反转，漂亮

CSS有元素的 :hover 伪元素，这是一个动态设置入口，然后可以借助一些CSS属性，比如变换大小、背景色、滤镜等，来实现一些有限的动态效果

马黑黑 发表于 2023-12-25 17:53

红影 发表于 2023-12-25 13:07
播放器鼠标上去前后的颜色和背景的那块颜色还挺配，真奇妙

这是融合滤镜（fix/background-blend-mode）的效果。选择一个自己觉得合适的，它会产生一定的透明度，和背景友好相处。融合，需要透明度，**-blend-mode 属性是精心设计的。

马黑黑 发表于 2023-12-25 17:53

红影 发表于 2023-12-25 12:56
金光万道，真壮观

感谢支持，阔气了

红影 发表于 2023-12-25 19:45

马黑黑 发表于 2023-12-25 17:50
CSS有元素的 :hover 伪元素，这是一个动态设置入口，然后可以借助一些CSS属性，比如变换大小、背景色、滤 ...

还好这个是按钮，会想起来鼠标移动上去，有时会想不起用鼠标划拉啊{:4_173:}

红影 发表于 2023-12-25 19:46

马黑黑 发表于 2023-12-25 17:53
这是融合滤镜（fix/background-blend-mode）的效果。选择一个自己觉得合适的，它会产生一定的透明度，和 ...

去看了一下，你是说 mix-blend-mode: exclusion; 这个吧，这个融合你还是挺早以前讲的，快忘光了{:4_173:}

红影 发表于 2023-12-25 19:46

马黑黑 发表于 2023-12-25 17:53
感谢支持，阔气了

这个真的特别漂亮呢{:4_187:}

马黑黑 发表于 2023-12-25 20:44

红影 发表于 2023-12-25 19:46
这个真的特别漂亮呢

还好

马黑黑 发表于 2023-12-25 20:45

红影 发表于 2023-12-25 19:46
去看了一下，你是说 mix-blend-mode: exclusion; 这个吧，这个融合你还是挺早以前讲的，快忘光了{:4_173: ...

不用就会忘记。也不必记下，懂原理就好，用到时查查资料。

马黑黑 发表于 2023-12-25 20:46

红影 发表于 2023-12-25 19:45
还好这个是按钮，会想起来鼠标移动上去，有时会想不起用鼠标划拉啊

那也没关系：你碰到的人千千万万，有交集的也就那么几个

红影 发表于 2023-12-25 22:21

马黑黑 发表于 2023-12-25 20:44
还好

很喜欢这样开阔的视野{:4_187:}

红影 发表于 2023-12-25 22:22

马黑黑 发表于 2023-12-25 20:45
不用就会忘记。也不必记下，懂原理就好，用到时查查资料。

是的，需要使用的时候去查一下，就能知道了。

马黑黑 发表于 2023-12-25 22:24

红影 发表于 2023-12-25 22:22
是的，需要使用的时候去查一下，就能知道了。

{:4_181:}

马黑黑 发表于 2023-12-25 22:24

红影 发表于 2023-12-25 22:21
很喜欢这样开阔的视野

谢谢喜欢

查看完整版本: 姬神 - 光明的日子