|
|

楼主 |
发表于 2025-7-20 16:48
|
显示全部楼层
参考代码
- <style>
- #papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://638183.freep.cn/638183/t24/w4/dreamer.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; }
- #player { position: absolute; aspect-ratio: 1/1; width: 16%; animation: rot 10s linear infinite var(--state); transform-style: preserve-3d; cursor: pointer; }
- #player:hover .ring { filter: hue-rotate(300deg); }
- .ring { position: absolute; width: 100%; height: 100%; border-radius: 100% 0; border: 12px double; border-color: var(--c1) var(--c2); background: rgba(0, 180, 90, 0.15); transform: rotateY(var(--ay)); transition: filter 1s; }
- #btnFs { bottom: 20px; color: #eee; }
- .leaf { border-color: rgba(0, 0, 0, .5); opacity: 0.5; }
- .vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .8; pointer-events: none; }
- @keyframes rot { to { transform: rotateY(1turn); } }
- </style>
- <div id="papa">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1477945941" autoplay loop></audio>
- <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/24/12/36/48/video67e0e16035bad.mp4" autoplay loop muted></video>
- <div class="ring leaf"></div>
- <div id="player"></div>
- </div>
- <script type="module">
- import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
- FS(papa, player);
- var total = 12;
- Array.from({length: total}).forEach( (d,k) => {
- d = document.createElement('div');
- d.className = 'ring';
- d.style.cssText += `
- --ay: ${k * 360 / total}deg;
- --c1: #${Math.random().toString(16).substring(2, 8)};
- --c2: #${Math.random().toString(16).substring(2, 8)};
- `;
- player.appendChild(d);
- });
- </script>
复制代码
|
|