加林森 发表于 2022-8-22 08:56

【末伏消暑】第八天 名：《名为你的春》- 王贰浪


<style>
      #papa { left: -214px; width: 1024px; height: 575px; background: #000 url('https://pic.imgdb.cn/item/62ff5d0716f2c2beb135acdb.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="575"></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=1970553941.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-22 08:56

歌词：

海城的雨摊开了难过
回应着情绪我却不说
只要它别坠落 在你孤单眼眸

你冰冷的唇咽下脆弱
吻过滚烫红尘更寂寞
试探好像泡沫 却坚定将你包裹

酒杯里囚禁 塞内贝尔的日落
混合将爱的感受 像骨骼在说

怎么我一捧温热 换你不动声色
别等到清晨才渴望星河
快乐像海边烟火 绚烂后跌落
该如何去失而复得

可是我不再拉扯 怎能重蹈覆辙
像橘色贝壳和海应和
当你递过来双手
我抱住你抱住春色

酒杯里囚禁 塞内贝尔的日落
混合将爱的感受 像骨骼在说
怎么我一捧温热 换你不动声色
别等到清晨才渴望星河
快乐像海边烟火 绚烂后跌落
该如何去失而复得

可是我不再拉扯 怎能重蹈覆辙
像橘色贝壳和海应和
当你递过来双手
我抱住你抱住春色

怎么我一捧温热 换你不动声色
别等到清晨才渴望星河
快乐像海边烟火 绚烂后跌落
该如何去失而复得

可是我不再拉扯 怎能重蹈覆辙
像橘色贝壳和海应和
当你递过来双手
我抱住你抱住春色

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

王贰娘是你的啥人，唱得介么好{:4_173:}

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

樵歌 发表于 2022-8-22 10:17
王贰娘是你的啥人，唱得介么好

好听吧。电视剧里面的歌曲。{:4_189:}

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

加林森 发表于 2022-8-22 10:20
好听吧。电视剧里面的歌曲。

你还木回答呀{:4_189:}

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

樵歌 发表于 2022-8-22 10:38
你还木回答呀

我也不认识。就是感觉她的声音挺好听的。

红影 发表于 2022-8-22 10:46

又是泡泡效果，真漂亮。欣赏队长好帖{:4_187:}

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

红影 发表于 2022-8-22 10:46
又是泡泡效果，真漂亮。欣赏队长好帖

是啊。这个简单，容易制作出来。

红影 发表于 2022-8-22 20:34

加林森 发表于 2022-8-22 10:49
是啊。这个简单，容易制作出来。

简单又好看，这个效果真心不错。

樵歌 发表于 2022-8-22 20:36

加林森 发表于 2022-8-22 10:45
我也不认识。就是感觉她的声音挺好听的。

原以为二娘是你隔壁邻居呢{:4_173:}

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

红影 发表于 2022-8-22 20:34
简单又好看，这个效果真心不错。

就是。挺好的。

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

樵歌 发表于 2022-8-22 20:36
原以为二娘是你隔壁邻居呢

你想法真多！
页: [1]
查看完整版本: 【末伏消暑】第八天 名：《名为你的春》- 王贰浪