巫娜-方寸一席

马黑黑 · 发表于 2023-12-26 11:50

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

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

x

马黑黑 · 发表于 2023-12-26 11:52

帖子代码

<style>
#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
box-shadow: 4px 8px 28px gray;
background: url('https://638183.freep.cn/638183/t23/3/fcyx.jpg') no-repeat center/cover;
overflow: hidden;
z-index: 1;
position: relative;
--state: paused;
}
#player {
position: absolute;
left: 384px;
top: 166px;
width: 230px;
height: 230px;
cursor: pointer;
animation: rotating 6s infinite alternate linear var(--state);
}
li-zi {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: navy;
opacity: .75;
animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
#vid {
position: absolute;
top: -60px;
width: 1024px;
height: 700px;
mix-blend-mode: screen;
object-fit: cover;
pointer-events: none;
}
@keyframes moving {
from { transform: translate(var(--x0),var(--y0)); }
to { transform: translate(var(--x1),var(--y1)); }
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c05d86785e.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=501220959" autoplay loop></audio>
<div id="player"></div>
</div>
<script>
let r = player.offsetWidth / 2 - 8, total = 120;
Array.from({length: total}).forEach((item,key) => {
let rad0 = (Math.PI / 180) * 360 / total * key,
rad1 = (Math.PI / 180) * (180 + (360 / total * key));
item = document.createElement('li-zi');
item.style.cssText += `
--x0: ${r + r * Math.cos(rad0)}px;
--y0: ${r + r * Math.sin(rad0)}px;
--x1: ${r + r * Math.cos(rad1)}px;
--y1: ${r + r * Math.sin(rad1)}px;
--duration: ${2 + Math.random() * 3}s;
--delay: -${Math.random() * 5}s;
background: #${Math.random().toString(16).substr(-6)};
`;
player.appendChild(item);
});
let mState = () => {
aud.paused ?
(papa.style.setProperty('--state','paused'), vid.pause()) :
(papa.style.setProperty('--state','running'), vid.play());
};
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>