<style>
#papa {
margin: 0 0 0 calc(50% - 931px);
width:1700px; height:900px;top:130px;
border: 1px solid gray;
background: url('https://pic.imgdb.cn/item/65a36a95871b83018a91435a.webp') no-repeat center/cover;
box-shadow: 3px 6px 12px #000;
z-index: 1;
position: relative;
display: grid;
overflow: hidden;
place-items: center;
}
#papa::before, #papa::after { position: absolute; content: ''; left: calc(50% - 220px); bottom:160px; width: 153px; height: 93px; background: url('https://pic.imgdb.cn/item/65a280e8871b83018aca187e.png') no-repeat center/cover; opacity: .9; animation: move 20s alternate infinite forwards; --xx: 20%; z-index: 3;}
#papa::after { transform: scale(-1,1); width: 100px; height: 53px;bottom:220px; --xx: 65%; z-index: 2;}
/* canvas画布不要在CSS中设定尺寸；用融合滤镜替代opacity滤镜，去掉黑色背景 */
#canv { position: absolute; mix-blend-mode: screen; }
#mypic1 { position: absolute; width: 360px;left: calc(90% - 30px); top: 120px; animation: fly 40s alternate infinite forwards; --xx: 0;z-index: 10;}
#mypic2 { position: absolute; width: 360px;left: calc(10% - 160px); top: 240px; animation: fly 30s alternate infinite forwards; transform: scale(-1,1);--xx: 90%;z-index: 10;}
@keyframes move { to { left: var(--xx); } }
@keyframes fly { to { left: var(--xx); } }
</style>
<div id="papa">
<!--canvas 画布尺寸的定义方法放在html代码中 -->
<canvas id="canv" width="1700" height="900"></canvas>
<span id="disc"></span>
<span id="tit"></span>
<img id="mypic1" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />
<img id="mypic2" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />
</div>
<script>
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);
sf.onload = () => {
let player = new ypP();
player.setAudSrc('https://music.163.com/song/media/outer/url?id=1804200359');
player.setBtnCss(`
width: 360px;
bottom: 10px;
z-index: 10;
--btnBg: url('http://qhxy.52qingyin.cn/file/20240114140113_78607.svg') no-repeat center/cover;
--trackBg: transparent;
--progBg: RoyalBlue;
--btnSize: 130px;
`);
player.setLrcCss(`top: 15px; color: rgba(65,105,225,.4); --bg: url('https://pic.imgdb.cn/item/65a3730c871b83018ab23f7a.gif'); opacity: .3; font-size: 2.0em;`);
player.lrcAr = [
[0.3,"单曲：醉江南",1.4],
[1.7,"歌手：方雨晨",0.9],
[2.65,"作词 : 毛一鹏",1.1],
[3.72,"作曲 : 吕小毅",0.9],
[4.67,"原唱：夏婉安",0.8],
[5.5,"作曲：毛一鹏",0.8],
[6.25,"编曲：吕小毅",0.8],
[7.08,"制作人：尤起胜",0.7],
[7.75,"混音：李帛轩",0.5],
[8.28,"吉他：吕小毅",0.5],
[8.78,"和声编写：毛一鹏",0.6],
[9.33,"和声：毛一鹏",0.5],
[9.83,"学习黑师《惊鸿》图片移动&《半壶纱》歌词背景效果",3.3],
[21.02,"一叶孤舟三语两言",5.0],
[26,"红尘万千留不住一夜夜失眠",4.0],
[30.09,"山间道几句回荡在耳边",4.5],
[35.04,"蓦然回首藏不住过往云烟",4.0],
[39.03,"一段煽情的誓言",3.0],
[42.04,"惊鸿过往不过面",2.4],
[44.42,"耳闻不到的画卷",2.9],
[47.29,"听山水之间",1.8],
[49.11,"几段情红了双眼",1.9],
[51.02,"爱恨在一念之间",2.1],
[53.08,"屋下燕几度周折又变迁",4.9],
[58.01,"这一段平凡的流年",3.0],
[61.05,"周转回荡又今天",2.0],
[63.07,"抹平了谁的情仇",3.0],
[66.04,"已不在少年",2.1],
[68.11,"几段相思谁赴宴",2.3],
[70.45,"染醉半岸江南边",1.6],
[72.05,"挥笔成诗又一抹的眷恋",4.5],
[77.03,"学习黑师《惊鸿》图片移动&《半壶纱》歌词背景效果",5.0],
[96.03,"一叶孤舟三语两言",5.0],
[102.07,"红尘万千留不住一夜夜失眠",3.9],
[106.01,"山间道几句回荡在耳边",5.0],
[111.03,"蓦然回首藏不住过往云烟",4.0],
[115.01,"一段煽情的誓言",3.0],
[118.05,"惊鸿过往不过面",2.0],
[120.03,"耳闻不到的画卷",3.0],
[123.02,"听山水之间",2.2],
[125.19,"几段情红了双眼",1.8],
[127.01,"爱恨在一念之间",2.1],
[129.09,"屋下燕几度周折又变迁",4.9],
[134.01,"这一段平凡的流年",3.1],
[137.11,"周转回荡又今天",2.3],
[139.46,"抹平了谁的情仇",2.9],
[142.38,"已不在少年",1.7],
[144.11,"几段相思谁赴宴",2.0],
[146.08,"染醉半岸江南边",2.0],
[148.05,"挥笔成诗又一抹的眷恋",4.6],
[153.54,"一段煽情的誓言",2.5],
[156.08,"惊鸿过往不过面",2.4],
[158.5,"耳闻不到的画卷",2.8],
[161.33,"听山水之间",1.8],
[163.18,"几段情红了双眼",2.3],
[165.48,"爱恨在一念之间",2.6],
[168.03,"屋下燕几度周折又变迁",4.1],
[172.41,"这一段平凡的流年",2.8],
[175.16,"周转回荡又今天",1.9],
[177.05,"抹平了谁的情仇",3.0],
[180.07,"已不在少年",2.1],
[182.12,"几段相思谁赴宴",1.9],
[184.02,"染醉半岸江南边",3.0],
[187,"挥笔成诗又一抹的眷恋",3.9]
];
/* canvas雨开始 ：加在插件 onload 事件中才能显示 */
(function main() {
let canv = document.getElementById('canv');
let ctx = canv.getContext('2d');
canv.width = canv.clientWidth;
canv.height = canv.clientHeight;
let dropList = [], linelist = [], mousePos = [0, 0];
let gravity = 0.5, mouseDis = 35, lineNum = 20, speedx = 0, maxspeedx = 0;
window.onmousemove = function (e) { mousePos[0] = e.clientX - offset(papa).x; mousePos[1] = e.clientY - offset(papa).y; maxspeedx = (e.clientX - canv.clientWidth / 2) / (canv.clientWidth / 2); }
function createLine(e) { let temp = 0.25 * (50 + Math.random() * 100); let line = { speed: 5.5 * (Math.random() * 6 + 3), die: false, posx: e, posy: -50, h: temp, corlor: '#eee' }; linelist.push(line); }
function createDrop(x, y) { let drop = { die: false, posx: x, posy: y, vx: (Math.random() - 0.5) * 8, vy: Math.random() * (-6) - 3, radius: Math.random() * 1.5 + 1 }; return drop; }
function madedrops(x, y) {
let maxi = Math.floor(Math.random() * 5 + 5);
for (let i = 0; i < maxi; i++) {
dropList.push(createDrop(x, y));
}
}
window.requestAnimationFrame(update);
function update() { if (dropList.length > 0) { dropList.forEach(function (e) { e.vx = e.vx + (speedx / 2); e.posx = e.posx + e.vx; e.vy = e.vy + gravity; e.posy = e.posy + e.vy; if (e.posy > canv.clientHeight) { e.die = true; } }); } for (let j = dropList.length - 1; j >= 0; j--) { if (dropList[j].die) { dropList.splice(j, 1); } } speedx = speedx + (maxspeedx - speedx) / 50; for (let i = 0; i < lineNum; i++) { createLine(Math.random() * 2 * canv.width - (0.5 * canv.width)); } let endLine = canv.clientHeight - Math.random() * canv.clientHeight / 5; linelist.forEach(function (e) { let dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos[0]) * ((e.posx + speedx * e.h) - mousePos[0]) + (e.posy + e.h - mousePos[1]) * (e.posy + e.h - mousePos[1])); if (dis < mouseDis) { e.die = true; madedrops(e.posx + speedx * e.h, e.posy + e.h); } if ((e.posy + e.h) > endLine) { e.die = true; madedrops(e.posx + speedx * e.h, e.posy + e.h); } if (e.posy >= canv.clientHeight) { e.die = true; } else { e.posy = e.posy + e.speed; e.posx = e.posx + e.speed * speedx; } }); for (let j = linelist.length - 1; j >= 0; j--) { if (linelist[j].die) { linelist.splice(j, 1); } } render(); window.requestAnimationFrame(update); }
function render() { ctx.fillRect(0, 0, canv.width, canv.height); ctx.lineWidth = 1; linelist.forEach(function (line) { ctx.strokeStyle = line.color; ctx.beginPath(); ctx.moveTo(line.posx, line.posy); ctx.lineTo(line.posx + line.h * speedx, line.posy + line.h); ctx.stroke(); }); ctx.lineWidth = 0.5; ctx.strokeStyle = "#fff"; dropList.forEach(function (e) { ctx.beginPath(); ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI); ctx.stroke(); }); }
function offset(e) { let x = e.offsetLeft, y = e.offsetTop, pa = e.offsetParent; while(pa != null) { x += pa.offsetLeft; y += pa.offsetTop; pa = pa.offsetParent; } return {x, y}; }
})();
/* canvas雨代码至此 */
};
</script>
<br><br><br><br><br><br><br><br><br><br><br>
发表于 2024-2-12 18:53
发表于 2024-2-12 18:55
。清梦新年快乐！