|
|

楼主 |
发表于 2023-9-5 12:24
|
显示全部楼层
帖子代码
- <style>
- #mydiv {
- margin: 0 0 0 calc(50% - 593px);
- display: grid;
- place-items: center;
- width: 1024px;
- height: 640px;
- border: 1px solid gray;
- background: linear-gradient(to right bottom, rgba(100,100,var(--bb),.5) 0, rgba(calc(255 - var(--bb)),0,0,.35) 50%), url('https://638183.freep.cn/638183/t23/webp2/yewu.webp') no-repeat center/cover;
- overflow: hidden;
- position: relative;
- --state: running;
- }
- yin-fu {
- position: absolute;
- top: 140px;
- font: bold 30px sans-serif;
- opacity: 1;
- animation: fly 10s var(--delay) infinite var(--state);
- }
- @keyframes fly { to { transform: rotate(var(--deg)) translateY(-400px); opacity: 0; } }
- </style>
- <div id="mydiv"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1950170789" loop autoplay></audio>
- <script>
- let script = document.createElement('script');
- script.charset = 'utf-8';
- script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
- mydiv.appendChild(script);
- let num = 0, step = 10;
- let degAr = [120,-120,90,-90],
- yinfu = ['\u2669','\u266f','\u266d','\u266c','\u266b','\u266a','\u263d','\u263c','\u00a7','\u266e','\u266f'];
- let geci = [[2,"暗夜舞者",4],[7,"",1]];
- let flash = () => {
- num += step;
- if(num > 255 || num < 0) step = -step;
- mydiv.style.setProperty('--bb', num);
- };
- Array.from({length: 20}).forEach((item,key) => {
- item = document.createElement('yin-fu');
- let idx = Math.floor(Math.random() * yinfu.length);
- item.innerText = yinfu[idx];
- item.style.cssText += `
- color: #${Math.random().toString(16).substr(-6)};
- --deg: ${degAr[key % 4]}deg;/*${60 - Math.random() * 120}deg;*/
- --delay: ${Math.random() * -10}s;
- `;
- mydiv.appendChild(item);
- });
- setInterval(()=> {
- if(aud.paused) return false;
- flash();
- },10);
- script.onload = () => {
- HCPlayer({
- papa: '#mydiv',
- lrcAr: geci,
- lrc_css: 'top: 20px;',
- fs_css: 'top: 210px; --bg: transparent;',
- player_css: `
- top: 100px;
- border-width: 0;
- color: #fff;
- --size: 180px;
- --bRad: 50%;
- --track: gray;
- --prog: orange;
- --btnBg: linear-gradient(yellow, red);
- `,
- lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
- });
- };
- </script>
复制代码
|
|