本帖最后由 花简静 于 2025-8-27 20:02 编辑
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 0px; margin: 150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/9; --bg:url('https://642303.freep.cn/150_642303/tu/20250825qixi02.webp') no-repeat center/cover, url('https://642303.freep.cn/642303/za/IMG_4381.GIF') no-repeat 92% 20%/10% 40%; --mode: screen; background-blend-mode: var(--mode); }
#player { position: absolute; bottom: -3%; left: -3%; height: 80px; width: 80px; cursor: pointer; transform-style: preserve-3d; animation: rot 6s linear infinite var(--state); }
li-zi { --hh: 35%; position: absolute; left: -50%; top: calc(50% - var(--hh)); width: 100%; height: var(--hh); background: radial-gradient(circle at 10% 10%, red, purple); border-radius: 50% 100% 0 100%; box-shadow: inset 0 0 30px lightblue, 2px 4px 16px rgba(0,0,0,.35); transform-origin: 100% 100%; }
#btnFs { right: 30px; bottom: 30px; color: PINK; }
.qk-vid {
top:-26%;
left:-16%;
height: 110%;
opacity: .38;
-webkit-mask: radial-gradient(circle,cyan, cyan,rgba(0,0,0,.35),transparent, transparent);
mix-blend-mode: overlay;
}
@keyframes rot {
to { transform: rotate(1turn); }
</style>
<div id="pa">
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=186583" autoplay loop></audio>
<video class="qk-vid" src="https://img.tukuppt.com/video_show/2269348/00/16/28/5e9d069a22eb8.mp4" autoplay loop muted></video>
<div id="player"></div>
</div>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
const tt = 12;
Array.from({length: tt}).forEach( (lz,idx) => {
lz = document.createElement('li-zi');
lz.style.cssText += `transform: rotate3d(0, 0.1, 1, ${idx * 360 / tt}deg);`;
player.appendChild(lz);
});
audio.onplaying = audio.onpause = () => {
pa.style.setProperty('--mode', audio.paused ? 'normal' : 'screen');
};
FS(pa, player);
</script>
| 
