秋夜为你下起雨
本帖最后由 醉美水芙蓉 于 2022-10-5 20:31 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 640px; background: url('https://s1.ax1x.com/2022/10/05/xlr48U.png') no-repeat center/cover; box-shadow: -20px 20px 100px #000; overflow: hidden; position: relative; }
#canv { position: absolute; width: 100%; height: 100%;opacity: .65; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: lightgray; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<canvas id="canv"></canvas>
<span id="disc"></span>
<span id="tit">秋夜为你下起雨</span>
</div>
<script>
let stars = new Array(100), aud = new Audio();
let w = papa.offsetWidth, h = papa.offsetHeight;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let lrcAr =[
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.loop = true;
aud.autoplay = true;
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=6960913&.mp3';
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
(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(ele) {
let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
while(pa != null) {
x += pa.offsetLeft;
y += pa.offsetTop;
pa = pa.offsetParent;
}
return {x,y};
}
})();
</script> 沙发{:4_334:} 秋风起，秋雨绵！{:4_199:} 秋雨下得好急啊，漂亮的制作，欣赏 闲言不语 发表于 2022-10-5 20:38
秋风起，秋雨绵！
谢谢不语老师点评！ 绿叶清舟 发表于 2022-10-5 21:51
秋雨下得好急啊，漂亮的制作，欣赏
谢谢清舟美女支持！ 只有雨，没有背景图的么，呵呵我还等了半天。欣赏水芙蓉好帖{:4_204:} 红影 发表于 2022-10-5 23:20
只有雨，没有背景图的么，呵呵我还等了半天。欣赏水芙蓉好帖
谢谢红影美女光临！ 醉美水芙蓉 发表于 2022-10-6 06:41
谢谢红影美女光临！
看到背景图了，很漂亮{:4_187:} 菇凉都冻僵了{:4_189:} 马黑黑 发表于 2022-10-6 09:45
菇凉都冻僵了
哈哈哈！真得要冻坏了！ 醉美水芙蓉 发表于 2022-10-6 11:43
哈哈哈！真得要冻坏了！
感冒了可不好{:4_173:}
页:
[1]