流星雨---【学习黑黑流星（拖尾版）】
<style>#papa { left:-340px; width: 1280px; height: 853px; top: 150px;;background: gray url('https://pic.imgdb.cn/item/62f71a4416f2c2beb199ed48.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; }
#disc { position: absolute; width: 60px; height: 60px; left: 1150px; bottom: 580px; 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: 470px; bottom: 110px;font: bold 32px / 40px sans-serif; color: lightblue; text-shadow: 2px 2px 4px #222; }
#canv { position: absolute; width: 700px; height: 233px; left: 101px; top: 5px; }
@keyframes rot { to { transform: rotate(360deg); } }
#huap { position: absolute; width: 250px; height: 350px; left: 1000px;; top: 480px;; }
</style>
<div id="papa">
<span id="lrcbox">流星雨--歌手：F4</span>
<canvas id="canv" width="700" height="233"></canvas>
<img id="huap" src="https://pic.imgdb.cn/item/62f71a7416f2c2beb19a754f.gif" alt="" />
<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(200), 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><br><br> @马黑黑
黑黑，我调整到200的星星，感觉近距离的500个数太多了 然后流星直接在画布设置了尺寸 图图做的不够漂亮，只是想做脑子里面的这种效果{:4_173:} 歌词同步也是，好久不玩，歌又不熟，求速度，一遍就做了，有歌词没有同步，大家勉强看看了 谢谢黑黑教程分享，没有实践就不会理解，现在基本明白这个画布怎么去设置了 小辣椒 发表于 2022-8-13 12:23
@马黑黑
黑黑，我调整到200的星星，感觉近距离的500个数太多了
一切都是根据场景来，你调整的非常适合 小辣椒 发表于 2022-8-13 12:26
歌词同步也是，好久不玩，歌又不熟，求速度，一遍就做了，有歌词没有同步，大家勉强看看了
歌词同步我们有核心代码，已经非常完美了 马黑黑 发表于 2022-8-13 12:44
一切都是根据场景来，你调整的非常适合
谢谢黑黑的指导，{:4_187:} 小辣椒 发表于 2022-8-13 12:47
谢谢黑黑的指导，
个人体会才是最重要的 马黑黑 发表于 2022-8-13 12:45
歌词同步我们有核心代码，已经非常完美了
求速度没有听几遍歌曲，直接做了{:4_173:} 小辣椒 发表于 2022-8-13 12:48
求速度没有听几遍歌曲，直接做了
额 马黑黑 发表于 2022-8-13 12:48
个人体会才是最重要的
就是脑子里面想做这个效果，图图不够漂亮{:4_170:} 马黑黑 发表于 2022-8-13 12:48
额
做好听听现在感觉蛮好听的 小辣椒 发表于 2022-8-13 12:50
做好听听现在感觉蛮好听的
不错吧？不过我对F4一直不去了解 小辣椒 发表于 2022-8-13 12:49
就是脑子里面想做这个效果，图图不够漂亮
可以的可以的，虽然可能没有达到你的标准 马黑黑 发表于 2022-8-13 12:51
不错吧？不过我对F4一直不去了解
这个是现场版 小辣椒 发表于 2022-8-13 12:52
这个是现场版
额。但我从来不听不看F4 马黑黑 发表于 2022-8-13 12:51
可以的可以的，虽然可能没有达到你的标准
发现现在网络图图很难找，必须自己要加工了 马黑黑 发表于 2022-8-13 12:53
额。但我从来不听不看F4
我也是搜索这个流星雨歌曲发现的
页:
[1]
2