流星雨TO：队长
<style>
#papa { left: -340px; width: 1280px; height: 780px; top: 150px; background: gray url('https://pic.imgdb.cn/item/62f7414016f2c2beb11ee043.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; }
#disc { position: absolute; width: 60px; height: 60px; left: 80px; bottom: 80px; 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; }
#lrcbox { position: absolute; left: 450px; bottom: 110px;font: bold 32px / 40px sans-serif; color: lightblue; text-shadow: 2px 2px 4px #222; }
#canv { position: absolute; width: 1280px; height: 450px;}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<span id="lrcbox">Loading ...</span>
<canvas id="canv" width="1280" height="400"></canvas>
<span id="disc"></span>
</div>
<script>
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let num = (m, n) => Math.floor(Math.random() * (n - m + 1) + m);
let stars = new Array(400), meteors = new Array(10);
let aud = new Audio();
let lrcAr = [
['0.01','流星雨--歌手：F4'],
['8.01','温柔的星空 应该让你感动'],
['14.11','我在你身后 为你布置一片天空'],
['21.22','不准你难过 替你摆平寂寞'],
['28.02','梦想的重量 全部都交给我'],
['35.11','牵你手 跟着我走 风再大又怎样'],
['41.72','你有了我 再也不会迷路方向'],
['49.44','陪你去看流星雨落在这地球上'],
['56.36','让你的泪落在我肩膀'],
['62.25','要你相信我的爱只肯为你勇敢'],
['70.85','你会看见幸福的所在'],
['82.56','伤感若太多 心丢给我保护'],
['89.28','疲倦的烟火 我会替你都赶走'],
['95.37','灿烂的言语 只能点缀感情'],
['102.32','如果我沉默 因为我真的爱你'],
['109.06','牵你手 跟着我走风再大又怎样'],
['115.91','你有了我 再也不会迷路方向'],
['123.51','陪你去看流星雨落在这地球上'],
['130.69','让你的泪落在我肩膀'],
['137.24','要你相信我的爱只肯为你勇敢'],
['144.38','你会看见幸福的所在'],
['151.38','陪你去看流星雨落在这地球上'],
['158.93','让你的泪落在我肩膀'],
['167.18','要你相信我的爱只肯为你勇敢'],
['172.62','你会看见幸福的所在'],
['179.78','你会看见幸福的所在'],
['194.31','谢谢欣赏'],
['196.00','谢谢欣赏']
];
aud.loop = true;
aud.autoplay = true;
aud.src = 'https://music.163.com/song/media/outer/url?id=1491476822.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');
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr) lrcbox.innerHTML = lrcAr;
}
});
for(j = 0; j < stars.length; j ++) {
let star = document.createElement('span');
star.className = 'meteor';
let x1 = num(0, w-5);
let y1 = num(0, h/4);
let x2 = x1 + num(50, 100);
let y2 = y1 + num(20, 50);
star.style.cssText += `width: ${num(1,4)}px; height: ${num(1,4)}px; left: ${x1}px; top: ${y1}px; --startX: ${x1}px; --startY: ${y1}px; --endX: ${x2}px; --endY: ${y2}px; animation: flow linear 1s ${j*.1}s infinite`;
papa.appendChild(star);
stars = star;
}
function Star() {
this.x = num(3, w - 3);
this.y = num(3, h -3);
this.r = num(1,3) * .5;
this.a = num(1, 10) * 0.1;
this.speedA = 0.01;
this.color = 'rgba(153, 204, 255, .6)';
}
Star.prototype = {
create: function() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fill();
},
flash: function() {
this.a +=this.speedA;
if(this.a > 1 || this.a < 0) this.speedA = -this.speedA;
this.color = 'rgba(153, 204, 255, ' + this.a+ ')';
this.create();
},
drop: function() {
this.x += 2;
this.y += 2;
this.a = .45;
if(this.x > w - 3 || this.y > h - 3) {
this.x = num(3, w - 3);
this.y = num(3, h -3);
}
}
};
for(let x = 0; x < stars.length; x++) {
let star = new Star();
stars = star;
}
for(let x = 0; x < meteors.length; x ++) meteors = num(0,stars.length - 1);
(function render() {
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0,0,0,.1)';
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation = 'lighter';
for(let x of stars) x.flash();
for(let x of meteors) stars.drop();
requestAnimationFrame(render);
})();
</script>
<br><br><br><br><br><br><br><br><br> @加林森 队长这个流星雨我加的是400，你是500，你对比一下还是我明显，所以背景一定要深颜色的 小辣椒 发表于 2022-8-13 14:42
@加林森
来了来了。 小辣椒 发表于 2022-8-13 14:43
队长这个流星雨我加的是400，你是500，你对比一下还是我明显，所以背景一定要深颜色的
好的。我去重新制作一个出来看看。 加林森 发表于 2022-8-13 15:08
好的。我去重新制作一个出来看看。
队长不急的，慢慢来 小辣椒 发表于 2022-8-13 15:13
队长不急的，慢慢来
嗯嗯。记住了。 这图图很梦幻的感觉。小辣椒是刷图机吗？出了这些美图{:4_187:} 这个播放器小巧玲珑，色彩艳丽，很漂亮{:4_187:} 这个队长最喜欢了 千羽 发表于 2022-8-14 16:59
这个播放器小巧玲珑，色彩艳丽，很漂亮
千羽这个播放器黑黑分享的，你可以做一次 马黑黑 发表于 2022-8-14 19:31
这个队长最喜欢了
队长好像做了3次了{:4_173:} 小辣椒 发表于 2022-8-14 19:33
队长好像做了3次了
队长其实挺厉害的额，如果加入自己的元素多一点点，帖子样式能区别于模仿对象，则是真正的高手了 马黑黑 发表于 2022-8-14 19:35
队长其实挺厉害的额，如果加入自己的元素多一点点，帖子样式能区别于模仿对象，则是真正的高手了
是的，小辣椒要向队长学习的 小辣椒 发表于 2022-8-14 19:37
是的，小辣椒要向队长学习的
某些方面。队长向你学习的东东还有多：创意、实现手段和方式、找图（含分辨高清图与低图）能力等等 歌曲经典，漂亮啊 马黑黑 发表于 2022-8-14 19:39
某些方面。队长向你学习的东东还有多：创意、实现手段和方式、找图（含分辨高清图与低图）能力等等
队长强的地方我就多多学习了{:4_173:} 绿叶清舟 发表于 2022-8-14 19:52
歌曲经典，漂亮啊
清舟这个是F4现场版，你听听下面粉丝的大呼小叫 小辣椒 发表于 2022-8-14 19:58
清舟这个是F4现场版，你听听下面粉丝的大呼小叫
还真是呢，曾经那几个很火的了 小辣椒 发表于 2022-8-14 19:56
队长强的地方我就多多学习了
那是那是
页:
[1]
2