小雨的心 发表于 2024-12-31 15:52:10

【小雨音画】喜迎元旦

<style>
#papa {
        margin: 10px 0 10px calc(50% - 871px);
        width: 1600px;
        height: 1200px;
      top:130px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://xiaoyudexin.oss-cn-beijing.aliyuncs.com/20/yuandan.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/2418175/00/02/22/5b52e01dad564.mp4" autoplay loop muted></video>

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

绿蔷薇 发表于 2024-12-31 21:52:16

撒花花
小雨元旦哈皮
{:S06:}

绿蔷薇 发表于 2024-12-31 21:52:57

喜庆的色彩、华丽的画面、动人的视觉效果~~~{:4_123:}

绿蔷薇 发表于 2024-12-31 21:54:07

借小雨精彩之帖
祝画廊的友友们元旦哈皮
{:S01:}

小雨的心 发表于 2025-1-1 13:21:22

绿蔷薇 发表于 2024-12-31 21:52
撒花花
小雨元旦哈皮

薇薇，元旦快乐，新年快乐~~~

圊圊淥詶 发表于 2025-1-1 16:07:39

好美的特效，华丽炫目，
谢谢小雨美图，祝新年快乐。

{:S06:}

欧阳风刀 发表于 2025-1-2 22:00:35

很是华丽，惊艳感觉。好制作。

欧阳风刀 发表于 2025-1-2 22:00:49

小雨新年快乐！{:1_155:}
页: [1]
查看完整版本: 【小雨音画】喜迎元旦