醉美水芙蓉 发表于 2024-12-31 21:04:30

雨声《迎新春》

<style>
#papa {
        margin: 10px 0 10px calc(40% - 931px);
        width: 1900px;
        height:1200px;
      top:100px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://bbs.cnzv.cc/up/upload/pic/12/20241231-0dc347ef9ff31b92365e14e9c4cc4910.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}

#player, #clone_player1 {
        position: absolute;
        left: 0px;
        top: 500px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: url('https://pic.imgdb.cn/item/6472da4af024cca17331746b.gif') no-repeat center/cover;
        mix-blend-mode: screen;
    opacity: .89;
        cursor: pointer;
        z-index: 199;
        animation: rotating 6s infinite alternate linear var(--state);
}
#clone_player1{
        left: 1466px;
        top: 430px;
        width: 180px;
        height: 180px;
        background: url('https://pic.imgdb.cn/item/658bf39dc458853aef551008.gif') no-repeat center/cover;
        filter: opacity(.99);
}
li-zi {
        position: absolute;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: navy;
        opacity: .99;
        animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#vid1 {
        position: absolute;
        width: 100%;
        height: 110%;
        opacity: .96;
        top:-80px;
        object-fit: cover;
        mix-blend-mode: screen;
        pointer-events: none;
}
#vid {
        position: absolute;
        left: 20px;
        top: 520px;
        width: 660px;
        height: 660px;
        border-radius: 50%;
        mix-blend-mode: normal;
        object-fit: cover;
        pointer-events: none;
}
@keyframes moving {
        from { transform: translate(var(--x0),var(--y0)); }
        to { transform: translate(var(--x1),var(--y1)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/10/16/99/2/6702110eb0167.mp4" autoplay loop muted></video>
        <video id="vid1" src="https://img.tukuppt.com/video_show/10/10/34/2/64fe8c57471a2.mp4" autoplay loop muted></video>

        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=260746" autoplay loop></audio>
        <div id="player"></div>
        <div id="clone_player1"></div>
</div>

<script>
let r = player.offsetWidth / 2 - 8, total = 120;
Array.from({length: total}).forEach((item,key) => {
        let rad0 = (Math.PI / 180) * 360 / total * key,
                rad1 = (Math.PI / 180) * (180 + (360 / total * key));
        item = document.createElement('li-zi');
        item.style.cssText += `
                --x0: ${r + r * Math.cos(rad0)}px;
                --y0: ${r + r * Math.sin(rad0)}px;
                --x1: ${r + r * Math.cos(rad1)}px;
                --y1: ${r + r * Math.sin(rad1)}px;
                --duration: ${2 + Math.random() * 3}s;
                --delay: -${Math.random() * 5}s;
                background: url('https://pic.imgdb.cn/item/6579ac10c458853aef031383.png') no-repeat center/cover;
        `;
        player.appendChild(item);
});

let mState = () => {
        aud.paused ?
                (papa.style.setProperty('--state','paused'), vid.pause()) :
                (papa.style.setProperty('--state','running'), vid.play());
};

aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);

player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script
<br><br><br><br><br><br><br><br></td></tr></table>

klxf 发表于 2025-1-1 02:14:30

漂亮，祝新年快乐

醉美水芙蓉 发表于 2025-1-1 19:47:45

klxf 发表于 2025-1-1 02:14
漂亮，祝新年快乐

祝友友新年快乐！
页: [1]
查看完整版本: 雨声《迎新春》