《夏雨风荷》（学习黑黑雨丝效果）
<style>
#papa { left: -242px; top:120px; width: 1080px; height: 680px; background: url('https://pic.imgdb.cn/item/63075ec616f2c2beb15490d2.jpg') no-repeat center/cover; box-shadow: -20px 20px 100px #000; overflow: hidden; position: relative; }
#canv { position: absolute; width: 700px; height: 580px;left:320px;top:10px;opacity: .15; }
#disc { position: absolute; width: 40px; height: 40px; right: 150px; bottom: 12px; 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; right: 266px; bottom: 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 style="position: absolute; left:10px; bottom: 0px; width:450px;">
<img alt="" src="https://pic.imgdb.cn/item/6307639e16f2c2beb156d7b5.png"/>
</div>
</div><br><br><br><br><br><br>
<script>
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1432248595.mp3';
aud.loop = true;
aud.autoplay = true;
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(canv).x;
mousePos = e.clientY - offset(canv).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_187:} 这雨丝效果漂亮，人物也选的好，影儿的图棒棒哒{:4_185:} 加林森 发表于 2022-8-25 21:04
制作漂亮，意境挺不错的。
多谢队长鼓励{:4_204:} 千羽 发表于 2022-8-25 21:08
清新亮丽的画面，美美哒
谢谢羽儿，学着做个{:4_179:} 千羽 发表于 2022-8-25 21:09
这雨丝效果漂亮，人物也选的好，影儿的图棒棒哒
是黑黑的代码雨丝，黑黑还在感叹溅起的水花无法鼠标跟随呢，我觉得已经很好了{:4_173:} 醉美水芙蓉 发表于 2022-8-25 21:11
制作漂亮！欣赏红影好作品！
多谢水芙蓉美女鼓励{:4_187:} 红影 发表于 2022-8-25 21:43
多谢队长鼓励
不客气。 优雅别致，耐听耐看 我记得我的光盘孔是圆的{:4_173:} 亲爱的，古风风格，配细雨绵绵，诗情画意的{:4_178:} 我都没有做的，只能看看休息天了 马黑黑 发表于 2022-8-25 22:23
优雅别致，耐听耐看
多谢黑黑，其实看到这个雨的时候就想做个的，那会正好没空。 马黑黑 发表于 2022-8-25 22:23
我记得我的光盘孔是圆的
不知道啊，我只调整了画布的大小和位置，光盘没动过啊。可能背景衬托的？ 小辣椒 发表于 2022-8-26 15:16
亲爱的，古风风格，配细雨绵绵，诗情画意的
我把画布大小调了一下，放到窗子里了。这个适合有边界的，毕竟画布有底色。 小辣椒 发表于 2022-8-26 15:17
我都没有做的，只能看看休息天了
我也早就想做了，前段时间没空。等着看亲爱的作品{:4_187:} 红影 发表于 2022-8-26 19:57
不知道啊，我只调整了画布的大小和位置，光盘没动过啊。可能背景衬托的？
道理上是 红影 发表于 2022-8-26 19:56
多谢黑黑，其实看到这个雨的时候就想做个的，那会正好没空。
嗯嗯{:4_181:}