加林森 发表于 2022-8-19 20:58

《行歌》- 陈鸿宇


<style>
      #papa { left: -214px; width: 1024px; height: 790px; background: #000 url('https://pic.imgdb.cn/item/62ff881a16f2c2beb14ecc91.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">行歌 - 陈鸿宇</span>
      <span id="disc"></span>
      <canvas id="canv" width="1024" height="790"></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=449578813.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-19 20:59

歌词：

成长是一场冒险
迷途的人先上路
年少时处处风景
不想回头

成长是一场游戏
勇敢的人先开始
跌撞再慌张前行
不说回头

行歌，在草长莺飞的季节里喃喃低唱
走过人潮汹涌忽然止步
怎么，热烈时一步倦怠一步回望阑珊处
从前轻狂绕过时光

成长是一场失去
肩负枉然的意义
无论你懂得与否
不能回头

从哪来要往哪去
曾听爱的人说起
就此匆忙的错过
不必回头

行歌，在恍然半生的好景里不再多想
走过平淡日常忽然止步
怎么，伶仃时一步漠然一步回首梦尽处
从前轻狂绕过时光

行歌，谁在一边走一边唱一边回头张望
有些苦涩始终都要去尝
怎么，这些年不会失望也不太提及过往
从前轻狂绕过时光
让我们彼此分享互相陪伴吧
一起面对人生这一刻的孤独吧

从前轻狂绕过时光

加林森 发表于 2022-8-19 20:59

@马黑黑 @小辣椒

小辣椒 发表于 2022-8-19 20:59

队长电脑好了吧{:4_173:}

小辣椒 发表于 2022-8-19 21:00

是个泡泡效果{:4_174:}

绿叶清舟 发表于 2022-8-19 21:06

俺说咋等了半天没东西出来的了{:4_189:}

加林森 发表于 2022-8-19 21:08

小辣椒 发表于 2022-8-19 20:59
队长电脑好了吧

好了好了。真开心。{:4_189:}

加林森 发表于 2022-8-19 21:08

小辣椒 发表于 2022-8-19 21:00
是个泡泡效果

是的。这个也是老黑的教程教的。

加林森 发表于 2022-8-19 21:09

绿叶清舟 发表于 2022-8-19 21:06
俺说咋等了半天没东西出来的了

泡泡效果。

绿叶清舟 发表于 2022-8-19 21:12

加林森 发表于 2022-8-19 21:09
泡泡效果。

是啊，鼠标移上去了才发现的

加林森 发表于 2022-8-19 21:15

绿叶清舟 发表于 2022-8-19 21:12
是啊，鼠标移上去了才发现的

是的。

红影 发表于 2022-8-19 21:28

这个泡泡效果真好看，欣赏队长好帖{:4_187:}

马黑黑 发表于 2022-8-19 21:36

队长高产

加林森 发表于 2022-8-19 21:36

红影 发表于 2022-8-19 21:28
这个泡泡效果真好看，欣赏队长好帖

就是好玩的。

加林森 发表于 2022-8-19 21:37

马黑黑 发表于 2022-8-19 21:36
队长高产

电脑搞好了我开心了。{:4_189:}

马黑黑 发表于 2022-8-19 21:37

加林森 发表于 2022-8-19 21:37
电脑搞好了我开心了。

挺好挺好

加林森 发表于 2022-8-19 21:40

马黑黑 发表于 2022-8-19 21:37
挺好挺好

谢谢你！

红影 发表于 2022-8-20 21:03

加林森 发表于 2022-8-19 21:36
就是好玩的。

这个泡泡效果也觉得特别好呢{:4_187:}

加林森 发表于 2022-8-20 21:10

红影 发表于 2022-8-20 21:03
这个泡泡效果也觉得特别好呢

是的啊。
页: [1]
查看完整版本: 《行歌》- 陈鸿宇