论坛 › 音乐沙龙 › 《坐看云端》（学习黑黑光明的日子代码）

红影 发表于 2023-12-27 00:00

《坐看云端》（学习黑黑光明的日子代码）

<style>
#papa {
        margin: 10px 0 10px calc(50% - 721px);
        width: 1280px;
        height: 750px;
        background: url('https://pic.imgdb.cn/item/658aec9cc458853aef74a85f.jpg') 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: multiply;
        width: 240px;
        cursor: pointer;
        transition: filter 1s;
        animation: rot 6s infinite linear var(--state);
}
#mypic:hover {
        filter: sepia(50%) 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);
}
body { overflow-x: hidden; }
#baiBox {
      margin: auto;
      width: 500px;
      text-align: center;
      font-size: 3.8rem;
      font-weight: bold;
      font-family:cursive;
      color: transparent;      
      background: linear-gradient(180deg,hsla(195,100%,73%,.65),hsla(205,100%,79%,.85));
      filter: drop-shadow(2px 2px 6px hsla(45,0%,0%,.95));
      -webkit-background-clip: text;
      transform-origin: top;
      animation: yao 1.2s linear infinite alternate var(--state);
}
@keyframes yao {
      from{transform: perspective(800px) rotatex(26deg); }
      to { transform: perspective(800px) rotatex(-26deg); }
}

@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://pic.imgdb.cn/item/658aed8ac458853aef791877.png" alt="" title="暂停/播放" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=463524028" autoplay loop></audio>
<div id="baiBox" style="position: absolute; left: 400px; top: 10px; ">坐看云端-李志辉</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-27 00:00

很喜欢这个光芒万丈的效果，跟着学习一个。谢谢黑黑的代码@马黑黑 {:4_187:}

马黑黑 发表于 2023-12-27 08:29

凌晨发帖，厉害哈

幸运草 发表于 2023-12-27 08:48

好看{:6_244:}

梦油 发表于 2023-12-27 09:51

这莲花瓣放射的万丈光芒，使我想到了峨眉山的佛光。影子朋友制做的这也是吉祥之光啊！

红影 发表于 2023-12-27 09:51

马黑黑 发表于 2023-12-27 08:29
凌晨发帖，厉害哈

我也想去感受一下mix-blend-mode和filter带来的变化啊，一感受就晚了{:4_173:}

红影 发表于 2023-12-27 09:52

幸运草 发表于 2023-12-27 08:48
好看

谢谢草儿鼓励{:4_187:}

红影 发表于 2023-12-27 10:00

梦油 发表于 2023-12-27 09:51
这莲花瓣放射的万丈光芒，使我想到了峨眉山的佛光。影子朋友制做的这也是吉祥之光啊！

那就最好了，可以给大家带来幸福吉祥{:4_187:}

醉美水芙蓉 发表于 2023-12-27 12:09

醉美水芙蓉 发表于 2023-12-27 12:10

红影 发表于 2023-12-27 12:34

醉美水芙蓉 发表于 2023-12-27 12:09
哇！红影够厉害的，不睡觉！

不是呢，昨天玩得没注意，就晚了{:4_173:}

红影 发表于 2023-12-27 12:34

醉美水芙蓉 发表于 2023-12-27 12:10
真漂亮！

谢谢水芙蓉美女鼓励{:4_187:}

马黑黑 发表于 2023-12-27 13:22

红影 发表于 2023-12-27 09:51
我也想去感受一下mix-blend-mode和filter带来的变化啊，一感受就晚了

尝试是花时间的

红影 发表于 2023-12-27 13:43

马黑黑 发表于 2023-12-27 13:22
尝试是花时间的

嗯，一个个换进去，看效果{:4_173:}

马黑黑 发表于 2023-12-27 21:54

红影 发表于 2023-12-27 13:43
嗯，一个个换进去，看效果

纯理论上的东西很难记下来

红影 发表于 2023-12-27 22:52

马黑黑 发表于 2023-12-27 21:54
纯理论上的东西很难记下来

你说过的，用的时候去查一下就好啊{:4_173:}

马黑黑 发表于 2023-12-28 12:16

红影 发表于 2023-12-27 22:52
你说过的，用的时候去查一下就好啊

嗯嗯

红影 发表于 2023-12-28 13:11

马黑黑 发表于 2023-12-28 12:16
嗯嗯

在做帖里熟悉功能，也是学习的方法之一{:4_187:}

马黑黑 发表于 2023-12-29 09:37

红影 发表于 2023-12-28 13:11
在做帖里熟悉功能，也是学习的方法之一

那是的

红影 发表于 2023-12-29 11:56

马黑黑 发表于 2023-12-29 09:37
那是的

很多时候不去动手，都不知道坑在哪{:4_173:}

查看完整版本: 《坐看云端》（学习黑黑光明的日子代码）