小辣椒 发表于 2023-12-31 14:10

帖赠亦是金祝新年快乐！（学习黑黑 [愉]加点点克隆效果）


<style>
#papa {
        margin: 150px 0 0 calc(50% - 801px);
        width: 1440px;
        height: 800px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://xlaj.cn/assets/file/zp/20231231014404.gif') 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: 600px;
        top: 415px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(0,0,200,.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: 682px; top: 402px; filter: hue-rotate(30deg); }
#clone_player2 { --time: 2.4s; left: 704px; top: 334px; filter: hue-rotate(50deg); }
#clone_player3 { --time: 2s; left: 676px; top: 244px; filter: hue-rotate(60deg); }
#clone_player4 { --time: 1.4s; left: 714px; top: 348px; filter: hue-rotate(40deg); }
#clone_player5 { --time: 3.0s; left: 613px; top: 371px; 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;
        left: 780px;top:180px;
        width: 60%;
        height: 60%;
        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); }
}

#tit {
      position: absolute;
      left: 750px;
      top: 620px;
      background-image:url('https://xlaj.cn/assets/file/zp/20231230134933.gif '); background-size:cover;
      width:800px; height:200px; font: bold 1.8em serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #eddfdc solid; z-index: 10;
}

#dt1{ position: absolute; width: 450px; height: 442px; top: 310px; left: 450px;opacity: 1; z-index: 3; }
#dt2{ position: absolute; width: 55px; height: 55px; top: 180px; left: 128px; opacity: 1; z-index: 3; }

</style>
<div id="papa">
<img id="dt1" src="https://xlaj.cn/assets/file/zp/20231231014626.png" alt="" />
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2023/11/bu/02/mf.gif" alt="" />
        <video id="vid" src="https://zgsy-1254134120.cos.ap-guangzhou.myqcloud.com/zgsy112.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://xlaj.cn/assets/file/zp/20231231014318.mp3" autoplay loop></audio>

<div id="tit">泪蛋蛋掉在酒杯杯里 TO：亦是金<br></div>


        <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-31 14:11

@马黑黑

谢谢黑黑源码分享，抄个作业交上来{:4_170:}

小辣椒 发表于 2023-12-31 14:13

@亦是金
谢谢前辈的关心，谢谢送小辣椒的礼物，一直想回礼，拖到今天，不好意思这个作业就当礼物了

祝前辈新年快乐，来年事事顺利！

小辣椒 发表于 2023-12-31 14:14

@红影

亲爱的，抄你的抄你的完成个作业{:4_170:}

小辣椒 发表于 2023-12-31 14:16

@走过岁月

岁月，感谢有你，生命不息，捣鼓不止，你的就是我的{:4_172:}

红影 发表于 2023-12-31 14:27

小辣椒 发表于 2023-12-31 14:14
@红影

亲爱的，抄你的抄你的完成个作业

亲爱的这个做得更好，让落下的小球隐在酒杯后面，看这个更觉得漂亮呢。这个构思很赞的{:4_199:}

红影 发表于 2023-12-31 14:29

这样的小球错落有致，更漂亮。背景和动态点缀也很漂亮，欣赏亲爱的好帖。亦是金老师收礼开心{:4_199:}

亦是金 发表于 2023-12-31 14:55

惊喜，开心，感动！谢谢小辣椒的礼物！{:4_187:}帖子制作漂亮，背景灵动好看，歌曲好听！{:4_199:}
也祝你新年快乐，身体倍棒，万事如意！{:4_187:}

梦油 发表于 2023-12-31 15:11


         祝小辣椒管理员新年快乐、万事遂心！
      借小辣椒管理员美帖祝福花潮朋友们新年快乐！

醉美水芙蓉 发表于 2023-12-31 20:17

马黑黑 发表于 2023-12-31 22:25

小辣椒 发表于 2023-12-31 14:11
@马黑黑

谢谢黑黑源码分享，抄个作业交上来

好漂酿

冬天的雨 发表于 2024-1-1 13:54

久听不厌，这首酒鬼歌{:4_170:}

冬天的雨 发表于 2024-1-1 13:56

这泪蛋蛋有点大的，泪水有点大的，当心伤心过度{:4_170:}

冬天的雨 发表于 2024-1-1 13:57

谢谢小辣椒分享，最喜欢的这首歌，我以前也是分享过的{:4_208:}

冬天的雨 发表于 2024-1-1 13:58

小辣椒元旦快乐！{:4_197:}{:4_185:}

千羽 发表于 2024-1-1 18:07

好提劲啊，真漂亮{:4_187:}{:4_181:}

千羽 发表于 2024-1-1 18:10

这对比度是杠杠哒，旁边的动图也加得很漂亮，那小蜜蜂好像会和着歌儿的节拍舞动呢

千羽 发表于 2024-1-1 18:12

问好亦是金老师，收礼开心{:4_187:}

千羽 发表于 2024-1-1 18:13

问好小辣椒，祝2024年健康快乐，好运相伴{:4_185:}

走过岁月 发表于 2024-1-2 13:13

小辣椒 发表于 2023-12-31 14:16
@走过岁月

岁月，感谢有你，生命不息，捣鼓不止，你的就是我的

全是你的
页: [1] 2 3
查看完整版本: 帖赠亦是金祝新年快乐！（学习黑黑 [愉]加点点克隆效果）