本帖最后由 凡哥 于 2024-7-30 18:08 编辑
2024年7月30日 星期二
<style>
#mydiv {
margin: 30px 0 30px calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/2/fj01.jpg') no-repeat center/cover;
box-shadow: 2px 3px 6px rgba(0,0,0,.6);
overflow: hidden;
z-index: 1;
pointer-events: none;
position: relative;
}
#mydiv::before, #mydiv::after { position: absolute; content: ''; }
#mydiv::after {
left: calc(50% - 60px);
top: 20px;
width: 120px;
height: 120px;
background: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover;
pointer-events: auto;
cursor: pointer;
animation: rot 8s linear infinite var(--state);
}
#mydiv::before {
bottom: 120px;
content: url('https://638183.freep.cn/638183/small/boat.gif');
-webkit-mask: radial-gradient(circle, red,transparent);
opacity: .9;
}
li-zi {
position: absolute;
left: calc(50% - 5px);
bottom: 0;
width: 10px;
height: 10px;
border-radius: 0 60%;
box-shadow: inset 0 0 10px yellow;
animation: fly 6s linear infinite var(--state);
}
@keyframes fly { to { transform: translate(var(--xx), var(--yy)) rotate(var(--deg)); } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=449924047" autoplay loop></audio>
</div>
<script>
Array.from({length: 100}).forEach(lz => {
lz = document.createElement('li-zi');
var idx = Math.random() > 0.5 ? 1 : -1;
lz.style.cssText += `
background: #${Math.random().toString(16).substring(2,8)};
animation-delay: -${Math.floor(Math.random() * 6)}s;
--xx: ${idx * Math.random() * 1000}px;
--yy: ${Math.random() * -800}px;
--deg: ${Math.random() * 720}deg;
`;
mydiv.appendChild(lz);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
发表于 2024-7-30 19:55
地板油光锃亮的