【简静音画】落雨听禅

花简静 · 发表于 2023-12-3 20:40

本帖最后由花简静于 2024-2-19 20:08 编辑

<style>
#papa { 
	margin: 0 0 0 calc(50% - 931px); 
	width: 1700px; 
	height: 900px; 
	top:130px;
	background: url('https://pic.imgdb.cn/item/656c1c93c458853aef29670b.webp') no-repeat center/cover; 
	box-shadow: 4px 4px 8px black; 
	overflow: hidden; 
	display: grid; 
	place-items: center; 
	z-index: 1; 
	position: relative; 
	--state: running; }
li-zi { 
	position: absolute; 
	bottom: 100%; 
	box-shadow: 0 0 12px 0 snow inset; 
	border-radius: 50%; 
	animation: drop var(--dur) var(--delay) infinite linear var(--state); 
}
	@keyframes drop { to { bottom: -100%; } }

#vid {
	position: absolute;
	width: 100%;
	height: 100%;
	top:-60px;
	object-fit: cover;
	pointer-events: none;
	mix-blend-mode: screen;
	z-index: 2;
	opacity: .99;
}
.mypic {
        position: absolute;
        right:400px;   
        top:40px;   
        cursor: pointer;
        mix-blend-mode: Multiply;
        z-index: 3;
    }
</style>
<div id="papa">
<div class="mypic"><img src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" /></div>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" autoplay="" loop="" muted=""></video>
</div>
<audio id="aud" crossorigin="anonymous" src="https://yinpin.s3-us-east-1.ossfiles.com/yzwq.mp3" autoplay="" loop=""></audio>
<script>(function() {
	let script = document.createElement('script');
	script.src = 'https://638183.freep.cn/638183/web/api/xypp_lrc.js';
	script.charset = 'utf-8';
	document.head.appendChild(script);
	let geci = [ [1,"瑶族舞曲",4], [6,"",1] ];
	script.onload = () => {
		HCPlayer({
			papa: '#papa',
			lrcAr: geci,
			lrc_css: 'left: 30px; top: -120px; color: lightblue; --bg: linear-gradient(rgba(100,140,50,.15),rgba(100,140,50,.45));',
                                                fs_css: 'left: -250px; bottom:50px; background: transparent;',
			player_css: `
				bottom: 26px;
				--ww: 800px;
				--color1: 	Linen;
				--color2: lightblue;
				--track: #aaa;
			`,
			pinpu: { size: 4, gap: 1},
		});
	};
	Array.from({length: 60}).forEach((item) => {
		item = document.createElement('li-zi');
		let size = 1 + Math.ceil(Math.random() * 3);
		item.style.cssText += `
			--dur: ${10 + Math.random() * 10}s;
			--delay: -${Math.random() * 10}s;
			width: ${size}px;
			height: ${size}px;
			right: ${Math.random() * 100}%;
			background: #${Math.random().toString(16).substr(-6)};
		`;
		papa.appendChild(item);
	});
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<br><br><br><br><br><br><br><br><br>