加林森 发表于 2022-8-20 08:25

【末伏消暑】第六天 欢：《欢（温柔女声弹唱）》- 廖凯雯


<style>
      #papa { left: -214px; width: 1024px; height: 640px; background: #000 url('https://pic.imgdb.cn/item/62fdfad316f2c2beb146b218.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="640"></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=1831998264.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-20 08:25

歌词：

作词 : 君欢_与
作曲 : 伽弥乐
我想要踏着梦再追着风
去握紧你手
我愿做黑暗中
属于你的烟火
也怕你不想懂
也不会懂
留我一个人疯
如果有
我也会还你笑容

红影 发表于 2022-8-20 10:54

鼠标跟随的泡泡，漂亮{:4_187:}

樵歌 发表于 2022-8-20 10:55

学得真快，昨天小黑是蜘蛛精，你今天是用气球跟随。{:4_173:}

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

红影 发表于 2022-8-20 10:54
鼠标跟随的泡泡，漂亮

挺好玩的。{:4_189:}

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

樵歌 发表于 2022-8-20 10:55
学得真快，昨天小黑是蜘蛛精，你今天是用气球跟随。

他那个是八爪鱼的变种。{:4_189:}

樵歌 发表于 2022-8-20 21:24

加林森 发表于 2022-8-20 10:59
他那个是八爪鱼的变种。

你试过了{:4_173:}

小辣椒 发表于 2022-8-20 22:04

队长这个泡泡效果特别喜欢吧，我都没有玩过

小辣椒 发表于 2022-8-20 22:04

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

加林森 发表于 2022-8-20 22:05

樵歌 发表于 2022-8-20 21:24
你试过了

是啊。玩不起。

加林森 发表于 2022-8-20 22:05

小辣椒 发表于 2022-8-20 22:04
队长这个泡泡效果特别喜欢吧，我都没有玩过

你也玩玩吧。

加林森 发表于 2022-8-20 22:06

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

谢谢哦。

小辣椒 发表于 2022-8-20 22:08

加林森 发表于 2022-8-20 22:05
你也玩玩吧。

暂时没有时间玩

加林森 发表于 2022-8-20 22:13

小辣椒 发表于 2022-8-20 22:08
暂时没有时间玩

那就算了！

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

加林森 发表于 2022-8-20 22:05
是啊。玩不起。

你这喜庆，他那吓人{:4_189:}

加林森 发表于 2022-8-21 11:28

樵歌 发表于 2022-8-21 10:51
你这喜庆，他那吓人

就是就是。{:4_189:}

樵歌 发表于 2022-8-21 21:22

加林森 发表于 2022-8-21 11:28
就是就是。

多来温油的{:4_173:}

加林森 发表于 2022-8-21 21:56

樵歌 发表于 2022-8-21 21:22
多来温油的

好的好的。{:4_189:}

樵歌 发表于 2022-8-22 10:29

加林森 发表于 2022-8-21 21:56
好的好的。

今天到王贰娘来了{:4_189:}

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

樵歌 发表于 2022-8-22 10:29
今天到王贰娘来了

是浪哦。{:4_189:}
页: [1] 2
查看完整版本: 【末伏消暑】第六天 欢：《欢（温柔女声弹唱）》- 廖凯雯