论坛 › 『灌水乐园』 › 跨年祝福开门红

非常开心 发表于 2024-1-1 00:16

跨年祝福开门红

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2028594">
<style>
#papa {
        margin: 10px 0 0 calc(50% - 701px);
        width: 1280px;
        height: 700px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://dingyue.ws.126.net/2019/04/14/22b1dc57a9b04218b7cbea44485da132.gif') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}

#clone_player1 { --time: 3.4s; left: 782px; top: 302px; filter: hue-rotate(30deg); }
#clone_player2 { --time: 2.4s; left: 844px; top: 334px; filter: hue-rotate(50deg); }
#clone_player3 { --time: 2s; left: 876px; top: 244px; filter: hue-rotate(60deg); }
#clone_player4 { --time: 1.4s; left: 974px; top: 248px; filter: hue-rotate(40deg); }
#clone_player5 { --time: 3.4s; left: 1013px; top: 171px; filter: hue-rotate(10deg); }
li-zi {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: navy;
        opacity: .75;
        animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#vid {
        position: absolute;
        bottom: -60px;
        width: 1280px;
        height: 800px;
        mix-blend-mode: screen;
        object-fit: cover;
        pointer-events: none;
       
}
@keyframes moving {
        from { transform: translate(var(--x0),var(--y0)); }
        to { transform: translate(var(--x1),var(--y1)); }
}
@keyframes rotating {
        from { transform: translate(0,0) rotate(0deg); }
        to { transform: translate(0,-120px) rotate(360deg); }
}

</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/10/10/20/5/65045fdd62926.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=294570.mp3" autoplay loop></audio>
        <div id="player" title="播放/暂停"></div>
        <div id="clone_player1"></div>
        <div id="clone_player2"></div>
        <div id="clone_player3"></div>
        <div id="clone_player4"></div>
        <div id="clone_player5"></div>
</div>

<script>
let r = player.offsetWidth / 2 - 2, total = 10;
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: #${Math.random().toString(16).substr(-6)};
        `;
        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 = clone_player1.onclick = clone_player2.onclick= clone_player3.onclick = clone_player4.onclick = clone_player5.onclick = () => aud.paused ? aud.play() : aud.pause();
clone_player1.innerHTML = clone_player2.innerHTML = clone_player3.innerHTML = clone_player4.innerHTML = clone_player5.innerHTML = player.innerHTML;

</script>
</td></tr></table>

zclo2003 发表于 2024-1-1 00:21

喜迎开门红！

非常开心 发表于 2024-1-1 00:27

本帖最后由 非常开心 于 2024-5-14 15:54 编辑

zclo2003 发表于 2024-1-1 00:21
喜迎开门红！
谢谢老师欣赏{:9001:}

楚心兰 发表于 2024-1-1 00:57

新年快乐！
开心！

missile 发表于 2024-1-1 08:46

新年第一天，祝大家都有个开门红！

声声慢 发表于 2024-1-1 09:33

又见开心，很开心，元旦快乐

热爱生活 发表于 2024-1-1 09:43

这个开门 红太精彩了

热爱生活 发表于 2024-1-1 09:43

我都听到声音了

热爱生活 发表于 2024-1-1 09:43

大家喜气洋洋

热爱生活 发表于 2024-1-1 09:43

欢欢喜喜过大年

查看完整版本: 跨年祝福开门红