论坛 › 『唯美音画』 › 一起看流星雨

宁静 发表于 2022-11-29 22:47

一起看流星雨

本帖最后由 宁静 于 2023-2-22 14:13 编辑 <br /><br /><style>
      #papa { left: -200px; 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>

宁静 发表于 2022-11-29 22:54

本帖最后由 宁静 于 2022-12-13 00:58 编辑


，
上传空间坏了，重新换了流星雨 不好意思

撒哈拉的雨 发表于 2022-11-30 18:04

周深的歌不说是男的，一般人都以为是女人的{:9001:}

撒哈拉的雨 发表于 2022-11-30 18:04

非常好听{:9022:}

撒哈拉的雨 发表于 2022-11-30 18:05

估计昨天看球的，睡这么迟

撒哈拉的雨 发表于 2022-11-30 18:06

晚上再来，下班的{:10_402:}

苏三月 发表于 2022-11-30 21:28

宁静又用了高科技元素啊，美美的画面{:10_402:}

苏三月 发表于 2022-11-30 21:30

这个播放器精巧靓丽，喜欢{:10_402:}

沉默 发表于 2022-11-30 22:20

听歌，碰运气{:9001:}

沉默 发表于 2022-11-30 22:21

看看今天运气好不好

查看完整版本: 一起看流星雨