【中伏消暑】第二十天 尽（人间芳菲尽）
<style>#papa { left: -302px; top:120px; width: 1200px; height: 675px; box-shadow: 3px 3px 20px #000; position: relative; }
#canvas { position: absolute; top: 0; left: 0; }
#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; }
#imgSnow, #bgSnow { display: none; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: snow; text-shadow: 2px 2px 4px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<canvas id="canvas"></canvas>
<img id="imgSnow" src="https://pic.imgdb.cn/item/62f7b72716f2c2beb1c1a776.png" alt="">
<img id="bgSnow" src="https://pic.imgdb.cn/item/62f7c53b16f2c2beb1f6df16.jpg" alt="">
<span id="disc"></span>
<span id="tit">人间芳菲尽</span>
<div style="position: absolute; left:302px; top: 162px; width:500px;">
<img alt="" src="https://pic.imgdb.cn/item/62f7c65b16f2c2beb1fb0d02.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=1459450928.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 () {
let ctx = canvas.getContext('2d');
let snowArray = {}; //雪花对象
let snowIndex = 0; //标识符
let setting = {
num: 50, //数量
snowSize: 24, //大小
startX: Math.random() * canvas.width, //起始横坐标
startY: 0, //起始纵坐标
vy: 0.01
}
canvas.width = papa.offsetWidth;
canvas.height = papa.offsetHeight;
function snow() {
this.x = Math.random() * canvas.width; // 起始横坐标
this.y = setting.startY; // 起始纵坐标
this.size = setting.snowSize + Math.random() * 10 - 10; //大小
this.vx = Math.random() * 3 - 2; //横坐标偏移量
this.vy = Math.random() * 10; //纵坐标偏移量
this.life = 0;
this.maxLife = 50;
this.id = snowIndex;
snowArray = this; //当前信息保存至对象snowArray
snowIndex ++;
}
snow.prototype.draw = function () {
this.x += this.vx;
this.y += this.vy;
this.vy += setting.vy;
this.life ++;
if (this.y > canvas.height * 0.9 - 20 || this.life >= this.maxLife) snowArray;
ctx.drawImage(imgSnow, this.x, this.y, this.size, this.size)
}
function render() {
ctx.drawImage(bgSnow, 0, 0, canvas.width, canvas.height);
for (let j = 0; j < setting.num; j++) {
if (Math.random() > 0.97) new snow();
}
for (let j in snowArray) {
snowArray.draw();
}
requestAnimationFrame(render);
}
render();
})();
</script> 套用黑黑雪花代码，把雪花改成了落花{:4_173:} 发现人物在花瓣后有点怪，又懒得再上传底图了，就另外添加个人物图片在前面覆盖原来的人物。懒人懒办法{:4_173:} 还有好几个效果没做图呢，看看还有哪些能跟消暑结合起来，就又可以偷懒了{:4_173:} 红影 发表于 2022-8-14 11:12
套用黑黑雪花代码，把雪花改成了落花
反正都是花{:4_173:} 红影 发表于 2022-8-14 11:13
发现人物在花瓣后有点怪，又懒得再上传底图了，就另外添加个人物图片在前面覆盖原来的人物。懒人懒办法{:4_ ...
这是恰到好处的处理方法 马黑黑 发表于 2022-8-14 11:45
反正都是花
对，反正都是一个系列的，不过是季节不同而已{:4_173:} 红影 发表于 2022-8-14 12:19
对，反正都是一个系列的，不过是季节不同而已
不同的季节下不同的花 马黑黑 发表于 2022-8-14 11:46
这是恰到好处的处理方法
底图那个本来也是后添加的，再上传个没人物的也不难，只是我比较懒，就直接贴个人物图在前面了{:4_173:} 红影 发表于 2022-8-14 12:20
底图那个本来也是后添加的，再上传个没人物的也不难，只是我比较懒，就直接贴个人物图在前面了
这是聪明的做法 马黑黑 发表于 2022-8-14 12:19
不同的季节下不同的花
下回我想想还能弄点什么来飞{:4_173:} 红影 发表于 2022-8-14 12:25
下回我想想还能弄点什么来飞
掉点人民币也成 马黑黑 发表于 2022-8-14 12:21
这是聪明的做法
谢谢黑黑，偷懒还被表扬，没想到{:4_173:} 红影 发表于 2022-8-14 12:26
谢谢黑黑，偷懒还被表扬，没想到
懒人有聪明的法子 霏霏细雨、漫漫雪花、点点水泡、气球飘荡到天女散花美不胜收。 飘洒的花雨下有个刘亦菲般的美女，漂亮{:4_187:} 好浪漫的画面啊，{:4_173:} 美得师兄流口水{:4_173:} 人间芳菲尽，美人不迟暮。师妹有古韵功底，作出的图图意境大妙。{:4_203:}