[大图音画] 愉

马黑黑 · 发表于 2023-12-27 08:08

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

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

x

马黑黑 · 发表于 2023-12-27 08:09

帖子代码

<style>
#papa {
margin: 0 0 0 calc(50% - 881px);
width: 1600px;
height: 814px;
box-shadow: 4px 8px 28px gray;
background: url('https://638183.freep.cn/638183/t23/3/yukk.jpg') no-repeat center/cover;
overflow: hidden;
z-index: 1;
position: relative;
--state: paused;
}
#player, #clone_player1, #clone_player2 {
position: absolute;
left: calc(50% - 80px);
top: 20px;
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(0,0,200,.7);
box-shadow: inset 0 0 90px white;
cursor: pointer;
animation: rotating 6s infinite linear var(--state);
}
#clone_player1, #clone_player2 {
left: 20px;
top: 120px;
filter: invert(.25) opacity(.45);
}
#clone_player2 { left: 1420px; }
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;
bottom: -60px;
width: 1600px;
height: 874px;
mix-blend-mode: screen;
object-fit: cover;
pointer-events: none;
transform: rotateX(180deg);
}
@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/02/01/5b4ef2ae32e28.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=392112" autoplay loop></audio>
<div id="player" title="播放/暂停"></div>
<div id="clone_player1"></div>
<div id="clone_player2"></div>
</div>
<script>
let r = player.offsetWidth / 2 - 8, total = 10;
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 = clone_player1.onclick = clone_player2.onclick = () => aud.paused ? aud.play() : aud.pause();
clone_player1.innerHTML = clone_player2.innerHTML = player.innerHTML;
</script>