论坛 › 音乐沙龙 › 《潇洒走一回》(跟着红影学习黑黑老师的代码)

亦是金 发表于 2023-12-28 22:28

《潇洒走一回》(跟着红影学习黑黑老师的代码)

本帖最后由 亦是金 于 2023-12-28 22:55 编辑 <br /><br /><style>
#papa {
        margin: 80px 0 0 calc(50% - 721px);
        width: 1280px;
        height: 680px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://z4a.net/images/2023/12/28/ppGfC4gss2.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}

#player, #clone_player0 {
        position: absolute;
        left: 0px;
        top: -300px;
        width: 1380px;
        height: 680px;

        cursor: pointer;
        --time: .4s;
        animation: rotating 0s var(--time) infinite alternate linear var(--state);
}

#player, #clone_player1, #clone_player2, #clone_player3, #clone_player4, #clone_player5, #clone_player6, #clone_player7, #clone_player8 {
        position: absolute;
        left: 702px;
        top: 415px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(255,182,193,.7);
        box-shadow: inset 0 0 20px white;
        cursor: pointer;
        --time: .4s;
        animation: rotating .7s var(--time) infinite alternate linear var(--state);
}
#clone_player0 { --time: 5.4s; left: -100px; top: 0px; filter: hue-rotate(30deg); }
#clone_player1 { --time: 3.4s; left: 500px; top: 452px; filter: hue-rotate(30deg); }
#clone_player2 { --time: 2.4s; left: 544px; top: 448px; filter: hue-rotate(50deg); }
#clone_player3 { --time: 2.0s; left: 586px; top: 454px; filter: hue-rotate(60deg); }
#clone_player4 { --time: 1.4s; left: 614px; top: 468px; filter: hue-rotate(40deg); }
#clone_player5 { --time: 3.4s; left: 753px; top: 441px; filter: hue-rotate(10deg); }
#clone_player6 { --time: 2.6s; left: 816px; top: 454px; filter: hue-rotate(60deg); }
#clone_player7 { --time: 1.0s; left: 864px; top: 468px; filter: hue-rotate(40deg); }
#clone_player8 { --time: 3.4s; left: 893px; top: 471px; 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;
        opacity: .4;
}
@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/2269348/00/14/77/5e60b7f986b97_10s_big.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2035173787" autoplay loop></audio>
        <div id="player" title="播放/暂停"></div>
      <div id="clone_player0"></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 id="clone_player6"></div>
        <div id="clone_player7"></div>
        <div id="clone_player8"></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_player0.onclick =clone_player1.onclick = clone_player2.onclick= clone_player3.onclick = clone_player4.onclick = clone_player5.onclick = clone_player6.onclick = clone_player7.onclick = clone_player8.onclick = () => aud.paused ? aud.play() : aud.pause();
clone_player0.innerHTML = clone_player1.innerHTML = clone_player2.innerHTML = clone_player3.innerHTML = clone_player4.innerHTML = clone_player5.innerHTML= clone_player6.innerHTML= clone_player7.innerHTML= clone_player8.innerHTML = player.innerHTML;

</script>


<style type="text/css">

@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }

body { overflow-x: hidden; }
#baiBox {
      font-size: 26px;
      color: #ff0000;
      position: relative;
      text-align:center;
      transform: translate(0%,35%);
      font-weight: normal;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-image: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);
      background-position: -1200px 0;
      filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
       -webkit-animation:loop 3s linear 1000000;
}

@-webkit-keyframes loop{
   0%{background-position: -1200px 0;}
   100%{background-position: -0 0;}
}

.tit {
      position: relative;
      width: 700px;
      top: -660px;
      left: -350px;;
      font-family:迷你简细圆;
      font-size: 40px;
      text-shadow: 2px 2px #ff00ff;
      font-weight:bold;
      color:#802A2A;z-index: 10; }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/

</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span>《潇洒走一回》- 新时代乐队</span>
<span > </span></div>

<div style="position: relative;width: 500px;height: 50px;top:-90px;LEFT: 730px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></div>
</style>

红影 发表于 2023-12-28 22:39

亦是金老师加的小球还要多啊。漂亮{:4_199:}

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

都是高手{:4_199:}

亦是金 发表于 2023-12-28 22:44

红影 发表于 2023-12-28 22:39
亦是金老师加的小球还要多啊。漂亮

谢谢红影，黑黑老师代码，我只是套用！{:4_187:}

亦是金 发表于 2023-12-28 22:44

冬天的雨 发表于 2023-12-28 22:40
都是高手

欢迎冬雨，谢谢欣赏！{:4_190:}

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

亦是金 发表于 2023-12-28 22:44
欢迎冬雨，谢谢欣赏！

跳动的小球太可爱的{:4_199:}

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

还有这种代码分享，马老师也是太神了，我去看看源码分享

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

亦是金 发表于 2023-12-28 23:37

冬天的雨 发表于 2023-12-28 22:51
跳动的小球太可爱的

谢谢喜欢！{:4_190:}

亦是金 发表于 2023-12-28 23:38

冬天的雨 发表于 2023-12-28 22:52
还有这种代码分享，马老师也是太神了，我去看看源码分享

我是抄红影的《卷珠帘》（学习黑黑替代节点克隆代码）作业的。你去看看，你也玩一个！{:4_190:}

亦是金 发表于 2023-12-28 23:39

醉美水芙蓉 发表于 2023-12-28 23:24
老师这个好玩！

问好水芙蓉！谢谢喜欢！{:4_187:}

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

亦是金 发表于 2023-12-28 23:38
我是抄红影的《卷珠帘》（学习黑黑替代节点克隆代码）作业的。你去看看，你也玩一个！

客气了，冬雨是抄都抄不来{:4_170:}

红影 发表于 2023-12-29 10:12

亦是金 发表于 2023-12-28 22:44
谢谢红影，黑黑老师代码，我只是套用！

这个小球的调位置还是挺不容易的呢。亦是金老师辛苦了{:4_187:}

亦是金 发表于 2023-12-29 10:29

红影 发表于 2023-12-29 10:12
这个小球的调位置还是挺不容易的呢。亦是金老师辛苦了

是的，第5个小球我反复调整，它始终悬空着，没有落在琴弦上呢，也就凑合着用了！{:4_198:}

亦是金 发表于 2023-12-29 10:29

问好红影！{:4_187:}

亦是金 发表于 2023-12-29 10:36

可能是第5个小球是落在美女的手腕上了，把美女的手腕都敲打的乌漆嘛黑的了！{:4_189:}

梦油 发表于 2023-12-29 11:19

欣赏美曲，问候亦是金。

红影 发表于 2023-12-29 12:05

亦是金 发表于 2023-12-29 10:29
是的，第5个小球我反复调整，它始终悬空着，没有落在琴弦上呢，也就凑合着用了！

把Y值调大就可以了啊。
其实开始我是让小球都先悬在空中下落的，发现调起来太难了，反正是反复运动，后来放琴弦上，终于好调了{:4_173:}

亦是金 发表于 2023-12-29 12:36

红影 发表于 2023-12-29 12:05
把Y值调大就可以了啊。
其实开始我是让小球都先悬在空中下落的，发现调起来太难了，反正是反复运动，后 ...

谢谢红影指点！不想调了，凑合着用。{:4_189:}

红影 发表于 2023-12-29 13:07

亦是金 发表于 2023-12-29 12:36
谢谢红影指点！不想调了，凑合着用。

其实跳动起来，这么点差异也看不出来，挺好的呢{:4_187:}

查看完整版本: 《潇洒走一回》(跟着红影学习黑黑老师的代码)