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

愉

<style>
#papa {
        margin: 0 0 0 calc(50% - 881px);
        width: 1600px;
        height: 814px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://638183.freep.cn/638183/t23/3/yukk.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}
#player, #clone_player1, #clone_player2 {
        position: absolute;
        left: calc(50% - 80px);
        top: 20px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(0,0,200,.7);
        box-shadow: inset 0 0 90px white;
        cursor: pointer;
        animation: rotating 6s infinite linear var(--state);
}
#clone_player1, #clone_player2 {
        left: 20px;
        top: 120px;
        filter: invert(.25) opacity(.45);
}
#clone_player2 { left: 1420px; }
li-zi {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: navy;
        opacity: .75;
        animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#vid {
        position: absolute;
        bottom: -60px;
        width: 1600px;
        height: 874px;
        mix-blend-mode: screen;
        object-fit: cover;
        pointer-events: none;
        transform: rotateX(180deg);
}
@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/2269348/00/02/01/5b4ef2ae32e28.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=392112" autoplay loop></audio>
        <div id="player" title="播放/暂停"></div>
        <div id="clone_player1"></div>
        <div id="clone_player2"></div>
</div>

<script>
let r = player.offsetWidth / 2 - 8, 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 = () => aud.paused ? aud.play() : aud.pause();
clone_player1.innerHTML = clone_player2.innerHTML = player.innerHTML;

</script>

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

帖子代码
<style>
#papa {
        margin: 0 0 0 calc(50% - 881px);
        width: 1600px;
        height: 814px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://638183.freep.cn/638183/t23/3/yukk.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}
#player, #clone_player1, #clone_player2 {
        position: absolute;
        left: calc(50% - 80px);
        top: 20px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(0,0,200,.7);
        box-shadow: inset 0 0 90px white;
        cursor: pointer;
        animation: rotating 6s infinite linear var(--state);
}
#clone_player1, #clone_player2 {
        left: 20px;
        top: 120px;
        filter: invert(.25) opacity(.45);
}
#clone_player2 { left: 1420px; }
li-zi {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: navy;
        opacity: .75;
        animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#vid {
        position: absolute;
        bottom: -60px;
        width: 1600px;
        height: 874px;
        mix-blend-mode: screen;
        object-fit: cover;
        pointer-events: none;
        transform: rotateX(180deg);
}
@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/2269348/00/02/01/5b4ef2ae32e28.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=392112" autoplay loop></audio>
        <div id="player" title="播放/暂停"></div>
        <div id="clone_player1"></div>
        <div id="clone_player2"></div>
</div>

<script>
let r = player.offsetWidth / 2 - 8, 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 = () => aud.paused ? aud.play() : aud.pause();
clone_player1.innerHTML = clone_player2.innerHTML = player.innerHTML;

</script>


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

沙发{:6_220:}

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

介个太壮观啦，好看{:6_244:}

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

黑黑把替代法的节点克隆马上就做出实例来了{:4_199:}

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

这个制作真漂亮。尤其那视频转180度，效果竟然那么好。
这个是上海陆家嘴附近呢，这个角度应该是从浦东方向拍的{:4_173:}

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

三个转盘的转动看大不出，小球的运动很有趣。一动俱动，暂停全停，真不错啊{:4_199:}

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

这是璀璨夺目大上海的夜景吧？做得真漂亮。

朵拉 发表于 2023-12-27 09:50

这个好看耶~~

亦是金 发表于 2023-12-27 10:14

问好老师！这个帖子好看，喜欢呢！欣赏学习了！{:4_190:}

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

亦是金 发表于 2023-12-27 10:14
问好老师！这个帖子好看，喜欢呢！欣赏学习了！

{:4_190:}

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

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

这是板凳{:4_170:}

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

朵拉 发表于 2023-12-27 09:50
这个好看耶~~

谢谢

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

梦油 发表于 2023-12-27 09:44
这是璀璨夺目大上海的夜景吧？做得真漂亮。

感谢支持

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

红影 发表于 2023-12-27 09:32
三个转盘的转动看大不出，小球的运动很有趣。一动俱动，暂停全停，真不错啊

母球就是酱紫设计的，它的主要功能是带动小球做弧形运动

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

红影 发表于 2023-12-27 09:30
这个制作真漂亮。尤其那视频转180度，效果竟然那么好。
这个是上海陆家嘴附近呢，这个角度应该是从浦东方 ...

这可不是偷拍哈{:4_170:}

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

马黑黑 发表于 2023-12-27 13:21
母球就是酱紫设计的，它的主要功能是带动小球做弧形运动

现在是带两个，应该还能多带的吧{:4_173:}

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

马黑黑 发表于 2023-12-27 13:22
这可不是偷拍哈

这个帖子里的母球可以着底色，前面那个帖子就是巫娜的那个，我好像给母球加了背景色，帖子里也不出来，不知道怎么回事{:4_203:}

梦油 发表于 2023-12-27 15:16

马黑黑 发表于 2023-12-27 13:20
感谢支持

别客气。

樵歌 发表于 2023-12-27 20:17

把一张静态的图用代码变得流光溢彩，璀璨无比，神奇。
页: [1] 2 3 4
查看完整版本: 愉