Rest : Our Eternity 9'28''

马黑黑 · 发表于 2025-7-16 18:33

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-7-16 18:33

帖子代码

<style>
/* Rest : Our Eternity 9'28'' */
#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://ts1.tc.mm.bing.net/th/id/R-C.4f19e660585af8e1140043315889aace?rik=Z4ig67BB%2baV0HQ&riu=http%3a%2f%2fwww.cntgol.com%2fuploads%2fallimg%2f190927%2f1J4331156-6.jpg&ehk=fwxLCD7likO%2fEL3qFwjQ92XJld5bp73A18eTipS%2b2PM%3d&risl=&pid=ImgRaw&r=0') 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; width: 30%; height: 20%; bottom: 120px; display: inherit; place-items: inherit; filter: drop-shadow(-70px 70px 10px rgba(0,0,0,.25)); }
#player::before { position: absolute; content: ''; width: 6vw; height: 6vw; background: url('https://638183.freep.cn/638183/small/2025/moon.webp') no-repeat center/cover; transform: skewX(-20deg) rotate(0); animation: rot 8s linear infinite var(--state); cursor: pointer; }
li-zi {
position: absolute;
width: 2vw;
height: 2vw;
border-radius: 50%;
background: radial-gradient(at 60% 80%, var(--c1) 1%, var(--c2));
transform: translate(calc(var(--rx) * cos(var(--deg))), calc(var(--ry) * sin(var(--deg))));
}
#btnFs { bottom: 20px; color: white; }
#vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .75; pointer-events: none; }
@keyframes rot { to { transform: skewX(-20deg) rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27406622" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/01/07/14/36/06/video677ccb560ee8b.mp4" autoplay loop muted></video>
<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, step = 0.35, lzAr = [], isRun = true, raf;
var rx = player.clientWidth / 2, ry = player.clientHeight / 2;
Array.from({ length: total }).forEach( (lz, idx) => {
lz = document.createElement('li-zi');
var a = idx * 360 / total;
lz.style.cssText += `
--c1: #${Math.random().toString(16).substring(2, 8)};
--c2: #${Math.random().toString(16).substring(2, 8)};
--deg: ${a}deg;
--rx: ${rx}px;
--ry: ${ry}px;
`;
lzAr.push({ elm: lz, a: a});
player.appendChild(lz);
});
aud.onplaying = aud.onpause = () => aud.paused ? cancelAnimationFrame(raf) : circling();
function circling() {
cancelAnimationFrame(raf)
lzAr.forEach((lz, idx) => {
lz.a = (lz.a + step) % 360;
lz.elm.style.setProperty('--deg', lz.a + 'deg');
});
raf = requestAnimationFrame(circling);
}
</script>