红影 发表于 2023-12-28 16:31

《卷珠帘》（学习黑黑替代节点克隆代码）


<style>
#papa {
        margin: 80px 0 0 calc(50% - 721px);
        width: 1280px;
        height: 680px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://pic.imgdb.cn/item/658d318ec458853aefa6fa1d.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}
#player, #clone_player1, #clone_player2, #clone_player3, #clone_player4, #clone_player5 {
        position: absolute;
        left: 702px;
        top: 415px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(255,182,193,.7);
        box-shadow: inset 0 0 20px white;
        cursor: pointer;
        --time: .4s;
        animation: rotating 1.5s var(--time) infinite alternate linear var(--state);
}
#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/6181262/01/28/52/6291f470c613a_10s_big.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33911611" 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>

红影 发表于 2023-12-28 16:33

母球好像有点小了，是想试验是否无论多少个都能克隆，琴弦的地方比较小，只能缩小母球了@马黑黑 {:4_173:}

红影 发表于 2023-12-28 16:34

假装一把大珠小珠落玉盘的叮咚琴声，只是跳动的按钮想抓到并暂停比较难{:4_196:}

红影 发表于 2023-12-28 16:35

记得黑黑讲过扩展点击范围的方式，急着发帖，就没去细翻{:4_173:}

梦油 发表于 2023-12-28 17:11

大球在动，小球也在动，很有生气。

焱鑫磊 发表于 2023-12-28 17:31

学习欣赏！{:4_187:}

亦是金 发表于 2023-12-28 19:07

@红影在我的自留地2中，试帖了你的这个帖子，请你去看看！{:4_187:}

红影 发表于 2023-12-28 19:21

梦油 发表于 2023-12-28 17:11
大球在动，小球也在动，很有生气。

是为了好玩的，想多加几个。看样子黑黑的节点克隆很成功，完全能做出来呢{:4_204:}

红影 发表于 2023-12-28 19:21

焱鑫磊 发表于 2023-12-28 17:31
学习欣赏！

多谢焱鑫磊鼓励{:4_187:}

红影 发表于 2023-12-28 19:26

亦是金 发表于 2023-12-28 19:07
@红影在我的自留地2中，试帖了你的这个帖子，请你去看看！

看到亦是金老师把选择范围扩大了，即使母球变更小，也能捕捉到了，这样真好，太赞了{:4_199:}

樵歌 发表于 2023-12-28 20:05

声随花瓣飘飞，好美的意境。{:4_187:}

亦是金 发表于 2023-12-28 20:11

红影 发表于 2023-12-28 19:26
看到亦是金老师把选择范围扩大了，即使母球变更小，也能捕捉到了，这样真好，太赞了

谢谢点赞！{:4_187:}

红影 发表于 2023-12-28 20:27

樵歌 发表于 2023-12-28 20:05
声随花瓣飘飞，好美的意境。

学习一下黑黑的代码，也是快乐，尤其想不出文字的时候{:4_173:}

红影 发表于 2023-12-28 20:27

亦是金 发表于 2023-12-28 20:11
谢谢点赞！

正愁怎么能捉到那些跳动的母球呢，这下子都解决了{:4_199:}

辫子哥哥 发表于 2023-12-28 21:49

掌声 鲜花送上{:4_199:}{:4_204:}

红影 发表于 2023-12-28 21:57

辫子哥哥 发表于 2023-12-28 21:49
掌声 鲜花送上

谢谢辫子哥哥，我就是套用代码乱玩呢{:4_173:}

冬天的雨 发表于 2023-12-28 22:44

漂亮的场景，这双美女的手真漂亮{:4_170:}

冬天的雨 发表于 2023-12-28 22:46

欣赏美女的精美作业，马老师的好学生{:4_178:}@马黑黑

醉美水芙蓉 发表于 2023-12-28 23:29

马黑黑 发表于 2023-12-29 09:28

冬天的雨 发表于 2023-12-28 22:46
欣赏美女的精美作业，马老师的好学生@马黑黑

{:4_191:}
页: [1] 2 3 4 5
查看完整版本: 《卷珠帘》（学习黑黑替代节点克隆代码）