本帖最后由 花简静 于 2024-8-18 15:31 编辑
<style>
#papa { margin: 130px 0 20px calc(50% - 821px); width: 1500px; height: 800px; background: lightblue; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; }
.vid { position: absolute; width: 110%; height: 100%;right:-50px;object-fit: cover; pointer-events: none; z-index: 2;}
.vid:nth-of-type(2) { height: 100%; height: calc(100% + 70px);top: -70px; mix-blend-mode: screen; opacity: .99; z-index: 3;}
.star { position: absolute; left: 30px; bottom: 40px; cursor: pointer; animation: ani 1.5s linear infinite alternate var(--state); z-index: 6;mix-blend-mode: screen;opacity: .6;}
.star:nth-of-type(2) { left: 180px; bottom: 160px; animation-delay: -.5s; mix-blend-mode: screen;opacity: .3;}
.star:nth-of-type(3) { left: 600px; bottom: 10px; animation-delay: -1s; mix-blend-mode: screen;opacity: .1;}
@keyframes ani { from { transform: rotate(-10deg) scale(.8); opacity: .2; } to { transform: rotate(10deg) scale(1.5); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1949389846.mp3" autoplay loop></audio>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0540a449967dc511122be6c46d14e977_preview.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" loop muted></video>
<img class="star" alt="" src="https://638183.freep.cn/638183/t22/webp/star.webp" />
<img class="star" alt="" src="https://638183.freep.cn/638183/t22/webp/star.webp" />
<img class="star" alt="" src="https://638183.freep.cn/638183/t22/webp/star.webp" />
</div>
<script>
(function() {
const vids = document.querySelectorAll('.vid'), stars = document.querySelectorAll('.star');
aud.onplaying = aud.onpause = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vids.forEach( vid => aud.paused ? vid.pause() : vid.play());
stars.forEach(star => star.title = aud.paused ? '点击播放' : '点击暂停');
};
stars.forEach(star => star.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '.star',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
});
};
let geci = [
[1.87,"单曲：水墨江南",3.9],
[5.8,"歌手：曲丹",1.6],
[7.38,"所属专辑：水墨江南",1.7],
[9.06,"作词 : 钟思贤/彭刚勇",1.7],
[10.76,"作曲 : 蔡传志",1.3],
[12.04,"编曲 : 林志峰",3.9],
[15.1,"赠：师妹风吟落",6.9],
[22.5,"学习黑师20240529《三星望月》多视频多图片联控效果",5.9],
[35.94,"摇曳乌蓬 绕过水乡人家",6.8],
[43.97,"邂逅你浅笑樱花 油纸伞下",6.3],
[52,"断桥的春风 染绿垂柳",6.2],
[59.9,"缠绵了雨巷雨巷中的他",6.3],
[67.6,"啊 烟雨江南水墨的画",6.7],
[75.91,"峰峦披薄雾 画舫沐红霞",6.3],
[83.46,"啊 烟雨江南水墨的画",6.6],
[91.86,"开启了尘封 缱绻了牵挂",6.3],
[101.7,"啊 烟雨江南水墨的画",6.5],
[112.6,"催醒了谁的爱恋",3.0],
[116.53,"惊艳了谁的芳华",4.3],
[155.95,"采捻月色 徘徊粉墙黛瓦",6.9],
[163.85,"聆听你轻拨琵琶诉说情话",6.4],
[171.85,"古宅的门楣 掩映思念",6.3],
[179.87,"守望着丁香丁香般的她",6.4],
[187.42,"啊 烟雨江南水墨的画",6.7],
[195.93,"峰峦披薄雾 画舫沐红霞",6.3],
[203.37,"啊 烟雨江南水墨的画",6.8],
[211.82,"开启了尘封缱绻了牵挂",6.4],
[221.68,"啊 烟雨江南水墨的画",6.5],
[232.59,"催醒了谁的爱恋",3.1],
[236.42,"惊艳了谁的芳华",4.4],
[243.7,"啊 烟雨江南水墨的画",6.5],
[254.48,"催醒了谁的爱恋",3.6],
[258.56,"惊艳了谁的芳华",4.2],
[266.1,"谁的芳华",9.1]
];
</script>
<Br><Br><Br><Br><Br><Br>
|
