2002年的第一场雪 - 刀郎TO：阳光（套用黑黑雪乡记忆效果）
<style>#papa { left: -295px; width: 1191px; height: 742px; top: 150px; box-shadow: 3px 3px 20px #000; position: relative; }
#canvas { position: absolute; top: 0; left: 0; }
#disc { position: absolute; width: 60px; height: 60px; left: 110px; top: 600px; 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: 360px; top: 610px;font: bold 25px / 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/62f32a1616f2c2beb12d3f67.png" alt="">
<img id="bgSnow" src="https://pic.imgdb.cn/item/62f329ee16f2c2beb12cb787.jpg" alt="">
<span id="disc"></span>
<span id="tit">2002年的第一场雪 - 刀郎</span>
</div>
<script>
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=77437.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: 100, //数量
snowSize: 20, //大小
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 = 100;
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>
<br><br><br><br><br><br><br><br> @三月的阳光
谢谢阳光，这么忙还送帖，小辣椒学习黑黑的教程套用一个下雪的效果送给你，千万别嫌弃
@马黑黑
黑黑套用一个，只是小辣椒换了个雪的png{:4_173:} 绒雪，好漂亮。啥东东一经小辣椒的巧手，都变得辣么美{:4_170:} 马黑黑 发表于 2022-8-10 20:49
绒雪，好漂亮。啥东东一经小辣椒的巧手，都变得辣么美
黑黑，这个我也是以前收藏的，今天用了感觉效果不错 小辣椒 发表于 2022-8-10 20:56
黑黑，这个我也是以前收藏的，今天用了感觉效果不错
非常好呢 马黑黑 发表于 2022-8-10 21:03
非常好呢
以前玩H5播放器里面用的 小辣椒 发表于 2022-8-10 21:05
以前玩H5播放器里面用的
看着舒服 马黑黑 发表于 2022-8-10 21:06
看着舒服
以前玩H5收藏的素材不少的 亲爱的这个图图很清晰，画面很漂亮，阳光哥哥收礼开心{:4_187:} 红影 发表于 2022-8-10 21:15
亲爱的这个图图很清晰，画面很漂亮，阳光哥哥收礼开心
哈哈~~亲爱的，旧图，现在都是求速度，用以前的图图 小辣椒这个制作太漂亮。嗯，我得去学习制作一个出来玩玩。{:4_199:} 小辣椒 发表于 2022-8-10 21:18
哈哈~~亲爱的，旧图，现在都是求速度，用以前的图图
但这个图图非常漂亮呢{:4_187:} 加林森 发表于 2022-8-10 21:36
小辣椒这个制作太漂亮。嗯，我得去学习制作一个出来玩玩。
队长不急的，慢慢来 红影 发表于 2022-8-10 21:40
但这个图图非常漂亮呢
做音乐诗画--冬的图图 小辣椒 发表于 2022-8-10 21:43
队长不急的，慢慢来
嗯嗯。知道的。 小辣椒 发表于 2022-8-10 21:09
以前玩H5收藏的素材不少的
非常好的习惯 帖子好看，音乐好听~！{:4_204:} {:4_178:} 青青子衿 发表于 2022-8-11 00:25
帖子好看，音乐好听~！
谢谢青青欣赏{:4_171:}
页:
[1]
2