2024年7月27日 星期六
<style>
#mydiv {
margin: 230px 0 30px calc(50% - 602px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/3/origin.jpg') no-repeat center/cover;
box-shadow: 0 0 6px rgba(0,0,0,.6);
overflow: hidden;
z-index: 1;
display: grid;
place-items: center;
position: relative;
}
#mydiv::before {
position: absolute;
content: '';
inset: -100px;
background: repeating-conic-gradient(at 50px 50px , transparent 0%, rgba(0,255,255,.25) 4%, transparent 8%);
transform-origin: 50px 50px;
animation: swear 5s infinite alternate var(--state);
}
#player {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
border: 12px double rgba(55,144,177,.7);
cursor: pointer;
animation: rot 12s linear infinite var(--state);
}
#player::before, #player::after {
position: absolute;
content: '';
border-radius: inherit;
border: inherit;
}
#player::before {
inset: 12px;
border-style: double solid;
border-color: rgba(68,205,241,.65);
}
#player::after { inset: 48px; border-style: dotted; }
li-zi {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: inset 0 0 10px lightblue;
animation: up 4s linear infinite var(--state);
}
@keyframes swear {
from { transform: rotate(-6deg); }
to { transform: rotate(6deg); }
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes up {
to { transform: translateY(var(--yy)); opacity: 0; }
}
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2053239064" autoplay loop></audio>
<div id="player"></div>
</div>
<script>
Array.from({length: 60}).forEach(i => {
i = document.createElement('li-zi');
i.style.cssText += `
left: ${50 + Math.floor(Math.random() * 100)}px;
top: 95px;
background: #${Math.random().toString(16).substring(2,8)};
animation-delay: -${Math.random() * 4}s;
--yy: ${500 * [1,-1][Math.round(Math.random())]}px;
`;
player.appendChild(i);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
发表于 2024-7-27 20:20
一会儿就出去捡。哈哈。。
同感，刚奋斗回来，哈哈。
来一杯