本帖最后由 花简静 于 2024-7-31 22:12 编辑
<style>
#mydiv {
margin: 30px 0 30px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://pic.imgdb.cn/item/66aa36ddd9c307b7e94b8bdb.webp') 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 {
right:210px;
bottom: 370px;
width: 80px;
height: 80px;
background: url('https://pic.imgdb.cn/item/658a82e6c458853aefff37dd.png') no-repeat center/cover;
pointer-events: auto;
cursor: pointer;
mix-blend-mode: screen;
animation: rot 8s linear infinite var(--state);
}
#mydiv::before {
left: calc(50% + 280px);
bottom: 300px;
mix-blend-mode: screen;
content: url('https://638183.freep.cn/638183/t22/gif/star.gif');
filter: hue-rotate(90deg);
-webkit-mask: radial-gradient(circle, red,transparent);
opacity: .9;
}
li-zi {
position: absolute;
right:230px;
bottom: 390px;
width: 30px;
height: 30px;
z-index: 3;
opacity: 0.39;
animation: fly 12s 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=2142604918" autoplay loop></audio>
</div>
<script>
Array.from({length: 120}).forEach(lz => {
lz = document.createElement('li-zi');
var idx = Math.random() > 0.65 ? 1 : -1;
lz.style.cssText += `
background: url('https://pic.imgdb.cn/item/658a82e6c458853aefff37dd.png') no-repeat center/cover;
animation-delay: -${Math.floor(Math.random() * 12)}s;
--xx: ${idx * Math.random() * 1000}px;
--yy: ${500 * [1,-1][Math.round(Math.random())]}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>
| 
