|
|

楼主 |
发表于 2023-12-23 17:11
|
显示全部楼层
帖子代码
- <style>
- #papa {
- margin: 0 0 0 calc(50% - 561px);
- width: 960px;
- height: 600px;
- box-shadow: 4px 8px 28px gray;
- background: url('https://638183.freep.cn/638183/t23/webp2/yzxb.jpg');
- display: grid;
- place-items: center;
- position: relative;
- }
- li-zi {
- position: absolute;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background: navy;
- opacity: .75;
- animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
- }
- @keyframes moving {
- from { transform: translate(0,0); }
- to { transform: translate(var(--xx),var(--yy)); }
- }
- </style>
- <div id="papa"></div>
- <script>
- let total = 90;
- let rx = papa.offsetWidth / 2 - 10, ry = papa.offsetHeight / 2 - 10;
- Array.from({length: total}).forEach((item,key) => {
- let rad = (Math.PI / 180) * 360 / total;
- item = document.createElement('li-zi');
- item.style.cssText += `
- --xx: ${rx * Math.cos(rad * key)}px;
- --yy: ${ry * Math.sin(rad * key)}px;
- --duration: ${2 + Math.random() * 3}s;
- --delay: -${Math.random() * 5}s;
- background: #${Math.random().toString(16).substr(-6)};
- `;
- papa.appendChild(item);
- });
- let sf = document.createElement('script');
- sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
- sf.charset = 'utf-8';
- document.body.appendChild(sf);
- sf.onload = () => {
- let myplayer = new mPlayer();
- myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=1933923242');
- myplayer.setBtnCss(`
- background: url('https://638183.freep.cn/638183/t23/btn/hshx.png') no-repeat center/cover;
- width: 200px;
- height: 200px;
- filter: hue-rotate(200deg) opacity(.8);
- `);
- myplayer.setLrcCss('top:10px; left:10px; color: lightblue; --bg: snow;');
- myplayer.lrcAr = [[2,'变奏的梦想 - 游心',6],[10,'',0]];
- };
- </script>
复制代码
|
|