【小雨音画】雨夜 祝呼吸姐生日快乐
<style>#papa { margin: 0 0 0 calc(50% - 891px); width:1600px; height:900px;TOP:130px; border: 1px solid gray; background: url('https://xiaoyudexin.oss-cn-beijing.aliyuncs.com/wf.jpg') 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('') 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;}
#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 id="canv" width="1600" height="900"></canvas>
<span id="disc"></span>
<span id="tit"></span>
<img id="mypic1" src="" alt="" />
<img id="mypic2" src="" 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 = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
(function main() {
let canv = document.getElementById('canv');
let ctx = canv.getContext('2d');
canv.width = canv.clientWidth;
canv.height = canv.clientHeight;
let dropList = [], linelist = [], mousePos = ;
let gravity = 0.5, mouseDis = 35, lineNum = 20, speedx = 0, maxspeedx = 0;
window.onmousemove = function (e) { mousePos = e.clientX - offset(papa).x; mousePos = 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.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) * ((e.posx + speedx * e.h) - mousePos) + (e.posy + e.h - mousePos) * (e.posy + e.h - mousePos)); 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.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}; }
})();
};
</script>
<br><br><br><br><br><br><br><br><br><br><br> 呼吸姐已经忘记这里还有号了{:S16:} 问好小雨，同贺呼吸姐芳辰~{:1_155:} 圊圊淥詶 发表于 2025-2-5 20:20
呼吸姐已经忘记这里还有号了
帮忙呼叫~~紧急呼叫深呼吸，云荷有木有大喇叭？ 和小雨一起同贺呼吸友生日快乐！ 玫の玫 发表于 2025-2-5 20:25
帮忙呼叫~~紧急呼叫深呼吸，云荷有木有大喇叭？
额可以七买个大喇叭，谁赞助点钱钱~~{:4_123:} 这个暗调很唯美，很搭人物素材，王一博灰常帅气~~{:4_123:} 借小雨美美的礼
再一次祝呼吸生日快乐 画面很酷啊，非常唯美，赞一个。
页:
[1]