论坛 › 欢乐水吧 › 梁祝小提琴协奏曲

绿叶清舟 发表于 2022-11-4 20:23

梁祝小提琴协奏曲

<style>
      #papa { left: -250px; width: 1100px; height: 700px; background: #000 url('https://pic1.imgdb.cn/item/6365042516f2c2beb1d7816c.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">梁祝小提琴协奏曲-TO梦油</span>
      <span id="disc"></span>
      <canvas id="canv" width="1100" height="700"></canvas>
</div>

<script>

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

aud.src = 'http://music.163.com/song/media/outer/url?id=148284.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-11-4 20:38

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww2.sinaimg.cn%2Fbmiddle%2F9150e4e5ly1ffivmz2k4tg207t07t76w.gif&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670157490&t=852365273baaa4ac2b9c63ef7aa1d38c

千羽 发表于 2022-11-4 20:39

鼠标上带了一串泡泡{:4_173:}，这是让人陶醉的经典曲子{:4_187:}

绿叶清舟 发表于 2022-11-4 20:44

起个网名好难 发表于 2022-11-4 20:38


谢谢，这个表情没见过啊

绿叶清舟 发表于 2022-11-4 20:45

千羽 发表于 2022-11-4 20:39
鼠标上带了一串泡泡，这是让人陶醉的经典曲子

化成泡泡了{:4_189:}

千羽 发表于 2022-11-4 20:46

绿叶清舟 发表于 2022-11-4 20:45
化成泡泡了

清舟棒棒哒{:4_187:}

绿叶清舟 发表于 2022-11-4 20:49

千羽 发表于 2022-11-4 20:46
清舟棒棒哒

懒了好几天了{:4_173:}

千羽 发表于 2022-11-4 20:51

绿叶清舟 发表于 2022-11-4 20:49
懒了好几天了

现在复工就好{:4_173:}

绿叶清舟 发表于 2022-11-4 20:52

千羽 发表于 2022-11-4 20:51
现在复工就好

凑了一个先交工了{:4_189:}

千羽 发表于 2022-11-4 20:55

绿叶清舟 发表于 2022-11-4 20:52
凑了一个先交工了

挺好的啊{:4_181:}

绿叶清舟 发表于 2022-11-4 21:00

千羽 发表于 2022-11-4 20:55
挺好的啊

那就算过关了{:4_173:}

小辣椒 发表于 2022-11-4 21:27

清舟灵感来了{:4_189:}

小辣椒 发表于 2022-11-4 21:28

一首经典的梁祝小提琴协奏曲，听的如痴如醉，美极了{:4_199:}

小辣椒 发表于 2022-11-4 21:28

梦油收礼开心@梦油

绿叶清舟 发表于 2022-11-4 21:40

小辣椒 发表于 2022-11-4 21:27
清舟灵感来了

梦油给的作业了{:4_173:}

小辣椒 发表于 2022-11-4 21:41

绿叶清舟 发表于 2022-11-4 21:40
梦油给的作业了

优秀作业{:4_199:}

马黑黑 发表于 2022-11-4 21:42

精美。特效不错

绿叶清舟 发表于 2022-11-4 21:44

马黑黑 发表于 2022-11-4 21:42
精美。特效不错

直接搬来了

马黑黑 发表于 2022-11-4 21:47

绿叶清舟 发表于 2022-11-4 21:44
直接搬来了

这个效果，我不记得是什么时候弄的，应该是两三个月前？

绿叶清舟 发表于 2022-11-4 22:02

马黑黑 发表于 2022-11-4 21:47
这个效果，我不记得是什么时候弄的，应该是两三个月前？

至少几个月了，搜在俺那个贴里翻出来的

查看完整版本: 梁祝小提琴协奏曲