加林森 发表于 2022-8-11 07:35

【中伏消暑】第二十天 尽：《尽欢》- 尕仔Music

本帖最后由 加林森 于 2022-8-11 10:54 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; width: 100%; height: 100%; background: #000; }
#bgImg { display: none; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 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; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: snow; text-shadow: 2px 2px 4px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <canvas id="canv"></canvas>
      <img id="bgImg" src="https://s1.ax1x.com/2022/08/09/v1Dv1P.jpg" alt="" />
      <span id="disc"></span>
      <span id="tit">尽欢| 尕仔Music</span>
</div>

<script>
let ctx = canv.getContext('2d');
let w = papa.clientWidth, h = papa.clientHeight, aud = new Audio();
let dotAr = Array.from({length: 250}, (item,key) => { return { x: Math.random()*w, y: Math.random()*h, r: Math.random()*5, }; });

canv.width = w;
canv.height = h;
aud.src = 'https://music.163.com/song/media/outer/url?id=1910702837.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 draw() {
      ctx.clearRect(0,0,w,h);
      ctx.drawImage(bgImg, 0, 0, w, h);
      ctx.beginPath();
      for(item of dotAr) {
                ctx.fillStyle = 'rgba(255,255,255,.35)';
                ctx.moveTo(item.x, item.y);
                ctx.arc(item.x, item.y, item.r, 0, Math.PI * 2);
      }
      ctx.fill();
      update();
}

function update() {
      for (key in dotAr) {
                dotAr.y -= (7 - dotAr.r) / 10;
                if(dotAr.y < 0) {
                        dotAr = {
                              x: Math.random() * w,
                              y: h,
                              r: Math.random()*5,
                        }
                }
      }
}

draw();
setInterval(draw,10);
</script>

白开水 发表于 2022-8-11 08:31

沙发来了{:4_173:}

加林森 发表于 2022-8-11 08:42

白开水 发表于 2022-8-11 08:31
沙发来了

来了就请坐。

加林森 发表于 2022-8-11 10:56

我怎么看错日子了啊？真是热晕了。{:4_203:}

樵歌 发表于 2022-8-11 11:58

就不用提前抢跑鸟，前面又木有漂亮菇凉{:4_189:}

加林森 发表于 2022-8-11 12:00

樵歌 发表于 2022-8-11 11:58
就不用提前抢跑鸟，前面又木有漂亮菇凉

热晕了。{:4_189:}

小辣椒 发表于 2022-8-11 12:47

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

加林森 发表于 2022-8-11 12:48

小辣椒 发表于 2022-8-11 12:47
欣赏队长的好制作

小辣椒中午好。

加林森 发表于 2022-8-11 12:53

小辣椒 发表于 2022-8-11 12:47
欣赏队长的好制作

雪花我制作出来了。在水区。

红影 发表于 2022-8-11 14:25

怎么就到第二十天了，这抢跑抢的{:4_173:}

加林森 发表于 2022-8-11 15:48

红影 发表于 2022-8-11 14:25
怎么就到第二十天了，这抢跑抢的

我们这里太热了，每天都是39-40度，把人的脑壳都整晕了。{:4_189:}

樵歌 发表于 2022-8-11 20:04

加林森 发表于 2022-8-11 12:00
热晕了。

难怪得，今天没见想看的{:4_189:}

加林森 发表于 2022-8-11 20:09

樵歌 发表于 2022-8-11 20:04
难怪得，今天没见想看的

想看美女啊。。。。。{:4_172:}

红影 发表于 2022-8-11 22:00

加林森 发表于 2022-8-11 15:48
我们这里太热了，每天都是39-40度，把人的脑壳都整晕了。

我们也是，天气很热。再坚持个十来天，肯定就凉快了。

加林森 发表于 2022-8-11 22:15

红影 发表于 2022-8-11 22:00
我们也是，天气很热。再坚持个十来天，肯定就凉快了。

我们这里发红色了。

红影 发表于 2022-8-12 21:16

加林森 发表于 2022-8-11 22:15
我们这里发红色了。

一场秋雨就凉快下来了。

加林森 发表于 2022-8-12 21:23

红影 发表于 2022-8-12 21:16
一场秋雨就凉快下来了。

我们这里越下雨越热。

红影 发表于 2022-8-12 22:12

加林森 发表于 2022-8-12 21:23
我们这里越下雨越热。

那还是还没到时候啊，在过几天就凉了。

加林森 发表于 2022-8-12 22:44

我们这里是变成了红色高温了。要命了。
页: [1]
查看完整版本: 【中伏消暑】第二十天 尽：《尽欢》- 尕仔Music