加林森 发表于 2022-8-24 07:18

【末伏消暑】第十天 行：《行星（PLANET）》-谭联耀


<style>
      #papa { left: -214px; width: 1024px; height: 1024px; background: #000 url('https://pic.imgdb.cn/item/62ff65c516f2c2beb13b54c7.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
      #canv { position: absolute; left: 0; top: 0; opacity: .45; }
      #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; z-index: 10; animation: rot 2s linear infinite; }
      #lrcbox { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: lightblue; text-shadow: 2px 2px 4px #222; }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <span id="lrcbox">行星（PLANET） - 谭联耀</span>
      <span id="disc"></span>
      <canvas id="canv" width="1024" height="1024"></canvas>
</div>

<script>

let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let aud = new Audio();
let circleArr = [];

aud.src = 'https://music.163.com/song/media/outer/url?id=539124479.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 Circle(x,y,r){
      this.x = x;
      this.y = y;
      this.r = r;
      this.color = 'rgba(255,255,255, .35)';
      this.dx = Math.random() * 12 - 7;
      this.dy = Math.random() * 12 - 7;
      circleArr.push(this);
}


Circle.prototype.render = function(){
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
      ctx.fillStyle = this.color;
      ctx.fill();
}

Circle.prototype.update = function(){
      this.x += this.dx;
      this.y += this.dy;
      this.r -= 0.4;
         if(this.r < 0){
                for (let j = 0; j < circleArr.length; j++) {
                        if (circleArr === this) {
                              circleArr.splice(j,1);
                        };
                }
                return false;
      }
      return true;
}

canv.onmousemove = function(event){
      new Circle(event.offsetX, event.offsetY, 30);
}

setInterval(function(){
      ctx.clearRect(0, 0, w, h)
      for (let j = 0; j < circleArr.length; j++) {
                circleArr.update() && circleArr.render();
      }
}, 20);

</script>

加林森 发表于 2022-8-24 07:18

歌词：

作词 : 谭联耀
作曲 : ラムジ
辗转来翻过去
在我梦里远方向你寄封信
如果收到记得回信
让我看看如今你的期许
抬头看天空的小行星
闪烁着托起了你
眼睛藏住星河的美丽
多想飞行到那里
找寻谜题
让我变成行星守护你
可以躲在云层偷偷照亮你
让我变成行星守护你
揭开寂寞星河中你的谜底
偶阵雨偶放晴
撑开一缕星光伴你入梦境
当你忘记当你回忆
有天终于想到为我命名
抬头看天空的小行星
闪烁着托起了你
眼睛藏住星河的美丽
多想飞行到那里
找寻谜题
让我变成行星守护你
可以躲在云层偷偷照亮你
让我变成行星守护你
揭开寂寞星河中你的谜底
洁白色月光洒下晶莹
等你举起那双手
祈求神明
让我变成行星守护你
可以躲在云层偷偷照亮你
让我变成行星守护你
揭开寂寞星河中你的谜底

樵歌 发表于 2022-8-24 07:59

漂亮干净的图图，还有那红月亮。很有热度。

加林森 发表于 2022-8-24 08:04

樵歌 发表于 2022-8-24 07:59
漂亮干净的图图，还有那红月亮。很有热度。

老兄早！任务全部完成了哦。

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

漂亮的气泡效果。云彩的颜色有点怪{:4_173:}

加林森 发表于 2022-8-24 11:17

红影 发表于 2022-8-24 11:14
漂亮的气泡效果。云彩的颜色有点怪

这个是自然的云彩颜色。

红影 发表于 2022-8-24 22:21

加林森 发表于 2022-8-24 11:17
这个是自然的云彩颜色。

云彩我印象中白的多{:4_173:}

加林森 发表于 2022-8-24 22:25

红影 发表于 2022-8-24 22:21
云彩我印象中白的多

那是你没见过吧。
页: [1]
查看完整版本: 【末伏消暑】第十天 行：《行星（PLANET）》-谭联耀