<style>
#papa {
position: relative;
margin: 130px 0 20px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://pic.imgdb.cn/item/65d6e5409f345e8d0337c399.webp') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden; /* 防止内部元素外溢 */
z-index: 1;
}
/* papa第一代子元素 img */
#papa > img {
position: absolute;
bottom: -12px;
width: 300px;
transform-origin: 50% 100%;
transform: rotateX(180deg);
z-index: 6;
animation: swear 2s infinite alternate var(--state);
}
/* 头三个第一代img元素 */
#papa > img:nth-of-type(-n+3) { transform-origin: left top; opacity: .8; }
#papa > img:nth-of-type(1) { width: 300px; top: -15px; right: 0; }
#papa > img:nth-of-type(2) { width: 200px; top: -12px; right: 160px; }
#papa > img:nth-of-type(3) { width: 120px; top: -30px; right: 150px; }
/* 关键帧动画 */
@keyframes swear {
from { transform: skew(-2deg); }
to { transform: skew(2deg); }
}
video {
position: absolute;
width: 100%;
height: 110%;
top:-80px;
object-fit: cover;
opacity: .79;
z-index: 2;
mix-blend-mode: screen;
}
.pic {
position: absolute;
width: 1500px;
left: 0;
bottom: 0PX;
z-index: 3;
content: url('');
}
</style>
<!-- HTML代码 -->
<div id="papa">
<div class="pic"></div>
<video src="https://img.tukuppt.com/video_show/15653652/00/31/65/5fb091975e282.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5267376" autoplay loop></audio>
<img src="https://pic.imgdb.cn/item/65d6e71e9f345e8d033d57be.png" alt="" />
<img src="https://pic.imgdb.cn/item/65d6e9a09f345e8d0344896c.png" alt="" />
<img src="h" alt="" />
</div>
<!-- JS代码 -->
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' :'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
// 生成5丛小竹子
Array.from({length: all = 3}).forEach((image,key) =>{
image = document.createElement('img'); //创建img标签
image.src = 'https://pic.imgdb.cn/item/65d6ea7d9f345e8d03470612.png';
//追加img样式 +=
image.style.cssText += `
left: ${key * 800 / all - 30}px;
height: ${Math.random() * 230 + 130}px;
animation-delay: -${Math.random() * 2}s;
`;
//img个体单击事件
image.onclick = () => aud.paused ? aud.play() : aud.pause();
papa.append(image); //父元素追加img元素
});
</script>
<script>
const sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);
sf.onload = () => {
const myplayer = new mPlayer();
myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=30053964');
myplayer.setBtnCss(`
background: url('https://pic.imgdb.cn/item/65d6e5a99f345e8d0338fc6e.png') no-repeat center/cover;
width: 100px;
height: 100px;
bottom: 286px;
right:650px;
z-index: 99;
`);
myplayer.setLrcCss('top: 30px; left: 50%; transform: translate(-50%);z-index: 5;font-size: 28px;--bg: linear-gradient(rgba(250,250,250,.25),rgba(255,215,0,.65)); color: #fff;');
myplayer.lrcAr= [
[0.06,"单曲：将心照亮",2.5],
[2.57,"歌手：张学友 / 王菲 / 草蜢 / 汤宝如 / 黎瑞恩 / 刘小慧",2.1],
[4.67,"所属专辑：鼓舞飞扬 '95",1.1],
[5.75,"作词 : 陈佳明",1.6],
[7.32,"作曲 : John Laudon",0.7],
[8.03,"编曲 : John Laudon",0.7],
[8.77,"学习黑师《2024222屈原问渡》图片摇曳效果",5.0],
[28.07,"（张） 茫茫人海汹涌",5.8],
[34.03,"生命中最多刹那错过",4.3],
[40.06,"青春就在追逐中匆匆飞逝",5.4],
[46.01,"你一直让我感动",4.2],
[53.09,"（菲） 渡过多少夜深",3.3],
[60.06,"只因为相信有一个人",3.8],
[66.05,"日夜不停为着我",2.2],
[68.85,"（菲、杰） 深深祝福 只有你",3.7],
[73.65,"（蜢） 能改变一生",2.6],
[80.09,"（合） 为我点盏灯 将我心照亮",4.5],
[86.2,"从你的手中我感觉希望",4.8],
[92,"有你在心中更加温暖",5.3],
[98.05,"你微笑是我灿烂的阳光",5.4],
[105.14,"为我点盏灯将我心照亮",4.6],
[111.45,"对你的守候无论在何方",4.7],
[117.03,"有你在身旁不怕黑暗",5.5],
[123.04,"点盏灯将心照亮",4.1],
[132.03,"（汤）渡过多少夜深",3.3],
[138.03,"（黎）只因为相信有一个人",4.5],
[145.2,"（刘）日夜不停为着我",1.8],
[147.01,"（合）深深祝福 只有你",6.1],
[153.09,"（张、蜢） 能改变一生",2.1],
[156,"（合）为我点盏灯 将我心照亮",4.3],
[162.03,"从你的手中我感觉希望",4.6],
[168.09,"有你在心中更加温暖",5.0],
[174.09,"你微笑是我灿烂的阳光",5.2],
[181,"为我点盏灯将我心照亮",4.5],
[187.26,"对你的守侯无论在何方",4.6],
[193.01,"有你在身旁不怕黑暗",5.2],
[199.06,"点盏灯将心照亮",3.9],
[204.76,"",2.3],
[207.1,"Music",3.5],
[210.62,"",23.5],
[234.09,"（张、菲、蜢） 为我点盏灯 将我心照亮",5.1],
[241.26,"从你的手中我感觉希望",4.4],
[247.02,"有你在心中更加温暖",4.9],
[253.19,"点盏灯将心照亮",3.4],
[259.38,"点盏灯将心照亮",5.6]
];
};
</script>
<Br><Br><Br><Br><Br><Br><Br><Br><Br>
