论坛首页 › 单图音画 › 【静。单图】新年快乐

醉美水芙蓉 发表于 2024-12-31 17:48:00

【静。单图】新年快乐

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

#player, #clone_player1 {
        position: absolute;
        left: 0px;
        top: 900px;
        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: 706px;
        top: 630px;
        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: 150%;
        opacity: .96;
        top:120px;
        object-fit: cover;
        mix-blend-mode: screen;
        pointer-events: none;
}
#vid {
        position: absolute;
        left: 20px;
        top: 520px;
        width: 600px;
        height: 600px;
        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="0000000" autoplay loop muted></video>
        <video id="vid1" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52e01dad564.mp4" autoplay loop muted></video>

        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=524148556" 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>

夏艳妍 发表于 2025-1-3 15:55:31

好像还不错！

查看完整版本: 【静。单图】新年快乐