本帖最后由 花简静 于 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>
|