本帖最后由 花简静 于 2024-12-22 21:59 编辑
<style>
#tz { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; border: 1px solid gray; background: url('https://642303.freep.cn/642303/tu/20241016daqs03.webp') no-repeat center/cover; box-shadow: 3px 3px 6px gray; border-radius: 8px; z-index: 1; position: relative;overflow: hidden; }
#player { position: absolute; opacity: 0.49;}
#ssvg { position: absolute; opacity: 0.13;}
#player { width: 60px; height: 60px; right: calc(50% - 600px); bottom: 160px; mix-blend-mode: exclusion;cursor: pointer; animation: rot 8s infinite linear var(--state); }
.down { animation: down var(--dur) var(--delay) linear infinite var(--state), flash 1s var(--delay) infinite alternate linear var(--state); }
#vid {
position: absolute;
width: 110%;
height: 110%;
object-fit: cover;
left:-6%;
top:-4%;
mix-blend-mode:overlay;
pointer-events: none;
opacity: 0.99;
-webkit-mask: linear-gradient(to bottom,transparent 3%,red 85%,red);
}
@keyframes down { to { transform: rotate(-10deg) translate(0, 1000px); } }
@keyframes flash { to { opacity: 0; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35729475" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/21/08/23/17/30/16/video61236aa8c6553.mp4" autoplay loop muted></video>
<svg id="ssvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<symbol id="cc" width="10" height="10" viewBox="0 0 10 10">
<circle cx="5" cy="5" r="5"></circlie>
</symbol>
<defs>
<g><animate attributeName="y" to="400" dur="10s" repeatCount="indefinite"></animate></g>
</defs>
</svg>
<img id="player" alt="" src="https://pic.imgdb.cn/item/65c0a8f19f345e8d03032e45.png" />
</div>
<script>
mkBalls = (num) => {
var ww = ssvg.clientWidth,
str = '',
colors = ['orange', 'tan', 'BlueViolet', 'Lavender', 'Thistle', 'plum', 'pink', 'purple'];
Array(num).fill(0).forEach((a,b) => {
var x = Math.round(Math.random() * (ww - 20)),
size = Math.floor(Math.random() * 6) + 6,
fill = colors[Math.floor(Math.random() * colors.length)],
dur = Math.floor(10 * Math.random() + 10),
delay = -1 * Math.round(Math.random() * 15);
str += `<use x="${x}" y="-20" width="${size}" height="${size}" fill="${fill}" href="#cc" class="down" style="--dur:${dur}s;--delay:${delay}s"/>`;
});
return str;
};
ssvg.innerHTML += mkBalls(50);
mState = () => {
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
ssvg.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? vid.pause() : vid.play();
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
