【中伏消暑】第二十天尽：《尽头》- 习谱予

加林森 发表于 2022-8-14 07:31

本帖最后由加林森于 2022-8-14 09:57 编辑 <br /><br /><style>
   #papa { left: -214px; width: 1024px; height: 640px; top: 150px; background: gray url('https://pic.imgdb.cn/item/62f8413a16f2c2beb1c6a1ae.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; }
   #disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 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; }
   #lrcbox { position: absolute; left: 60px; bottom: 10px;font: bold 22px / 40px sans-serif; color: lightblue; text-shadow: 2px 2px 4px #222; }
   #canv { position: absolute; width: 1024px; height: 350px;}
   @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
   <span id="lrcbox">Loading ...</span>
   <canvas id="canv" width="1024" height="350"></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 = [
            ['1.49','尽头 - 习谱予'],
['13.78','有一天忽然间身边的你不再见'],
['19.96','也不曾留下过一句抱歉'],
['26.54','或执着或沉默但依然没有结果'],
['32.95','假装对自己说不必难过'],
['40.06','凋谢的花纪念了过去的拥有'],
['46.59','空荡的行李箱证明你已自由'],
['52.91','独自一个人太难承受在你离开以后'],
['58.95','带不走的问候是不是该挽留'],
['72.11','我的整个世界都已经被回忆占有'],
['78.26','每天都祈祷错过的时间会倒流'],
['84.76','是我勇气不够还是我太过强求'],
['91.46','迷失在没有方向的夜里到最后'],
['97.93','还要过多久'],
['104.37','才忘记所有'],
['110.71','下一个路口'],
['117.40','我还在等候'],
['125.36','闭上眼又看见昨天在梦里蔓延'],
['130.20','这画面为何再一次重现'],
['137.27','太脆弱没把握让牵挂变成泡沫'],
['143.22','谁又会找到被遗忘的我'],
['150.06','熄灭的灯照亮过你笑的时候'],
['156.65','许多的片段都压在我的胸口'],
['163.22','独自一个人太难承受在你离开以后'],
['169.18','带不走的问候是不是该挽留'],
['182.35','我的整个世界都已经被回忆占有'],
['188.46','每天都祈祷错过的时间会倒流'],
['195.13','是我勇气不够还是我太过强求'],
['201.63','迷失在没有方向的夜里到最后'],
['208.00','还要过多久'],
['214.64','才忘记所有'],
['221.00','下一个路口'],
['227.68','我还在等候'],
['234.50','还要过多久'],
['241.38','我还在等候']
];
aud.loop = true;
aud.autoplay = true;
aud.src = 'https://music.163.com/song/media/outer/url?id=507533143.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-8-14 10:06

流星拖着长长的尾巴真好看。

加林森 发表于 2022-8-14 10:15

梦油发表于 2022-8-14 10:06
流星拖着长长的尾巴真好看。

是的。

樵歌发表于 2022-8-14 10:19

这漂亮的流星雨下面都没小人儿观赏么{:4_189:}

红影发表于 2022-8-14 10:19

这底图的流星和动图的流星拖尾一个方向呢，非常漂亮的制作，点赞{:4_187:}

加林森 发表于 2022-8-14 10:32

樵歌发表于 2022-8-14 10:19
这漂亮的流星雨下面都没小人儿观赏么

原来有人，被吓跑了。{:4_189:}

加林森 发表于 2022-8-14 10:33

红影发表于 2022-8-14 10:19
这底图的流星和动图的流星拖尾一个方向呢，非常漂亮的制作，点赞

谢谢支持！

红影发表于 2022-8-14 12:05

加林森发表于 2022-8-14 10:33
谢谢支持！

不客气，问好队长{:4_204:}

加林森 发表于 2022-8-14 12:31

中伏终于完了，大家可以休息一下了。

樵歌发表于 2022-8-14 17:29

加林森发表于 2022-8-14 10:32
原来有人，被吓跑了。

不会是黑黑吧{:4_189:}

加林森 发表于 2022-8-14 17:34

樵歌发表于 2022-8-14 17:29
不会是黑黑吧

有可能

小辣椒 发表于 2022-8-14 20:00

欣赏队长的精彩制作{:4_178:}

加林森 发表于 2022-8-14 20:32

小辣椒发表于 2022-8-14 20:00
欣赏队长的精彩制作

这个颜色可以看清楚了吧。

樵歌发表于 2022-8-14 21:54

加林森发表于 2022-8-14 17:34
有可能

咱俩意见要统一{:4_173:}

加林森 发表于 2022-8-14 22:02

樵歌发表于 2022-8-14 21:54
咱俩意见要统一

这张图片原来就是一个男人在下面的。

樵歌发表于 2022-8-15 10:51

加林森发表于 2022-8-14 22:02
这张图片原来就是一个男人在下面的。

没兴趣{:4_170:}

加林森 发表于 2022-8-15 10:52

樵歌发表于 2022-8-15 10:51
没兴趣

有兴趣就麻烦了。{:4_172:}

樵歌发表于 2022-8-15 17:35

加林森发表于 2022-8-15 10:52
有兴趣就麻烦了。

现在这个爱好的人可多了{:4_189:}

加林森 发表于 2022-8-15 17:59

樵歌发表于 2022-8-15 17:35
现在这个爱好的人可多了

是的。

页: [1]

花潮论坛's Archiver

【中伏消暑】第二十天 尽：《尽头》- 习谱予

【中伏消暑】第二十天尽：《尽头》- 习谱予