|
|

楼主 |
发表于 2023-8-26 22:29
|
显示全部楼层
帖子代码(插件仍在测试中)
- <style>
- #papa { margin: auto; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/3/yzwq.jpeg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
- li-zi { position: absolute; top: 100%; box-shadow: 0 0 12px 0 snow inset; border-radius: 50%; animation: drop var(--dur) var(--delay) infinite linear var(--state); }
- @keyframes drop { to { top: -100%; } }
- </style>
- <div id="papa"></div>
- <audio id="aud" crossorigin="anonymous" src="https://yinpin.s3-us-east-1.ossfiles.com/yzwq.mp3" autoplay loop></audio>
- <script>
-
- (function() {
- let script = document.createElement('script');
- script.src = 'https://638183.freep.cn/638183/web/api/xypp_lrc.js';
- script.charset = 'utf-8';
- document.head.appendChild(script);
- let geci = [ [1,"瑶族舞曲",4], [6,"",1] ];
- script.onload = () => {
- HCPlayer({
- papa: '#papa',
- lrcAr: geci,
- lrc_css: 'left: 30px; top: 20px; color: lightblue; --bg: linear-gradient(rgba(100,140,50,.15),rgba(100,140,50,.45));',
- player_css: `
- bottom: 26px;
- --ww: 500px;
- --color1: purple;
- --color2: lightblue;
- --track: #aaa;
- `,
- pinpu: { size: 4, gap: 1},
- });
- };
- Array.from({length: 50}).forEach((item) => {
- item = document.createElement('li-zi');
- let size = 10 + Math.ceil(Math.random() * 10);
- item.style.cssText += `
- --dur: ${10 + Math.random() * 10}s;
- --delay: -${Math.random() * 10}s;
- width: ${size}px;
- height: ${size}px;
- left: ${Math.random() * 100}%;
- background: #${Math.random().toString(16).substr(-6)};
- `;
- papa.appendChild(item);
- });
- })();
- </script>
复制代码
|
|