论坛 › 欢乐水吧 › 《夜的钢琴曲》（学习黑黑非响应脚链）TO焱鑫磊

红影 发表于 2023-9-3 13:02

《夜的钢琴曲》（学习黑黑非响应脚链）TO焱鑫磊

<style>
      #papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 600px; background: url('https://pic.imgdb.cn/item/64f35222661c6c8e54dde8ec.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
      .meteor { position: absolute; width: 2px; height: 2px; background: linear-gradient(to right, transparent, lightblue); transform: rotate(30deg); animation: fall var(--du) var(--delay) infinite linear; }
      @keyframes fall { to { transform: translate(100px,100px) rotate(40deg); width: var(--ww); opacity: 0; } }
#pic { position: absolute; left: 30px; bottom: 20px; width: 191px; height: 107px; opacity: 0.8;z-index: 1; }
#pic1 { position: absolute; left: -15px; bottom: 12px; width: 300px; height: 218px; opacity: 0.8;mix-blend-mode: screen; z-index: 1; }
</style>
<div id="papa"><span class="meteor"></span>
<img id="pic" src="https://pic.imgdb.cn/item/64f41053661c6c8e5400cf2c.png" alt="" />
<img id="pic1" src="https://pic.imgdb.cn/item/64f3d843661c6c8e54f5be17.gif" alt="" /></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1959588220" autoplay loop></audio>

<script>
      
(function() {
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
      script.charset = 'utf-8';
      document.head.appendChild(script);
      let geci = [ , ];
      script.onload = () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: geci,
                        lrc_css: 'top: -100px; color: lightblue; --bg: linear-gradient(rgba(240,240,180,.2),rgba(240,240,180,.4));',
                        fs_css: 'top: 410px; color: #ddd; background: BlueViolet;',
                        player_css: `
                              top: 30px;
                              border-width: 0;
                              color: #fff;
                              --size: 530px;
                              --bRad: 32% 18% 35% 15% / 16% 10% 40% 35%;
                              --track: gray;
                              --prog: lightblue;
                              --btnBg: url('https://pic.imgdb.cn/item/64f35b33661c6c8e54df5e6d.png') no-repeat center/cover;
                        `,
                        lizi: { color1: 'CornflowerBlue', color2: 'MediumSlateBlue' },
                });
      };
      [...new Array(50).keys()].forEach((e,k) => {
                e = document.createElement('span');
                e.className = 'meteor';
                e.style.cssText += `
                        left: ${100 * Math.random()}%;
                        top: ${50 * Math.random()}%;
                        --du: ${6 + Math.random() * 4}s;
                        --delay: -${Math.random() * 6}s;
                        --ww: ${50 + Math.random() * 50}px;
                `;
                papa.appendChild(e);
      });
})();

</script>

红影 发表于 2023-9-3 13:04

学习黑黑的新代码的同时，正好回礼了，感谢焱鑫磊送我的礼物，回个小礼，不成敬意@焱鑫磊{:4_187:}

红影 发表于 2023-9-3 13:05

套用了黑黑的代码以及星星，让星星落得更低了点，来呼应背景，虽然没配颜色，让星星有点看不出了{:4_173:}
感谢黑黑的代码@马黑黑{:4_187:}

焱鑫磊 发表于 2023-9-3 13:08

红影 发表于 2023-9-3 13:04
学习黑黑的新代码的同时，正好回礼了，感谢焱鑫磊送我的礼物，回个小礼，不成敬意@焱鑫磊

受宠若惊，谢谢红影！好喜欢！{:4_184:}

红影 发表于 2023-9-3 13:08

把按钮换了个图片上去。本来想调大点那个按钮，发现没法动，在插件里按钮在#mplayer::after ，除非重新上传插件，还是算了，这么大也挺好{:4_173:}
标题字另外配的，努力呼应按钮颜色，感觉调得还挺像了{:4_173:}

红影 发表于 2023-9-3 13:15

焱鑫磊 发表于 2023-9-3 13:08
受宠若惊，谢谢红影！好喜欢！

不客气啊，我也做不好，一点小心意{:4_187:}

醉美水芙蓉 发表于 2023-9-3 14:17

亦是金 发表于 2023-9-3 14:36

欣赏红影佳作！仰慕！学习了！{:4_187:}

梦油 发表于 2023-9-3 14:50

影子朋友下午好！作品的颜色与画面十分协调。你真棒！

顾-念 发表于 2023-9-3 19:43

蓝色的星海，很美

小辣椒 发表于 2023-9-3 20:23

亲爱的，这个脚链特制的，特别的大{:4_173:}

小辣椒 发表于 2023-9-3 20:24

播放器按钮也是做的新颖别致，赞的~~{:4_199:}

小辣椒 发表于 2023-9-3 20:24

焱鑫磊 发表于 2023-9-3 13:08
受宠若惊，谢谢红影！好喜欢！

焱鑫磊收礼开心{:4_204:}

红影 发表于 2023-9-3 20:50

醉美水芙蓉 发表于 2023-9-3 14:17
欣赏红影美女佳作！

问好水芙蓉美女，感谢鼓励{:4_187:}

红影 发表于 2023-9-3 20:51

亦是金 发表于 2023-9-3 14:36
欣赏红影佳作！仰慕！学习了！

问好亦是金老师，只是作着玩呢，感谢鼓励{:4_204:}

红影 发表于 2023-9-3 20:51

梦油 发表于 2023-9-3 14:50
影子朋友下午好！作品的颜色与画面十分协调。你真棒！

嗯嗯，颜色调了一下，这样可以跟背景协调点{:4_173:}

红影 发表于 2023-9-3 20:52

顾-念 发表于 2023-9-3 19:43
蓝色的星海，很美

多谢顾念鼓励，我是在学习代码呢{:4_187:}

红影 发表于 2023-9-3 20:53

小辣椒 发表于 2023-9-3 20:23
亲爱的，这个脚链特制的，特别的大

是啊，弄得大点才能套住那棵树{:4_189:}

红影 发表于 2023-9-3 20:54

小辣椒 发表于 2023-9-3 20:24
播放器按钮也是做的新颖别致，赞的~~

那按钮是找的图片啊{:4_173:}

马黑黑 发表于 2023-9-3 23:13

红影 发表于 2023-9-3 13:05
套用了黑黑的代码以及星星，让星星落得更低了点，来呼应背景，虽然没配颜色，让星星有点看不出了
...

{:4_190:}

查看完整版本: 《夜的钢琴曲》（学习黑黑非响应脚链）TO焱鑫磊