《殿书》- 奇然

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

本帖最后由加林森于 2022-8-25 12:13 编辑 <br /><br /><style>
   #papa { left: -214px; width: 1024px; height: 577px; background: #000 url('https://pic.imgdb.cn/item/6305f12c16f2c2beb19439f4.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: #DC143C; 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="577"></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=420008229.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 17:41

歌词：

覆辙韶光数几度春秋
纵观群书慕圣贤风流
篆墨行文若仙灵佐佑
巧笔漫有惊雷脍炙人口
未觉流年分寒暑夜昼
红尘沧桑若白云苍狗
苦读饮墨致文情苑囿
洗砚染池梅香墨痕长留
万篇谋策复癫狂未休
访先达鸿儒授拧眉骚首
滞涩通文少年已老朽
才换得一字能称才曰秀
寒窗待嫁痴既往难咎
翰林文墨消得容颜孱瘦
纵愿凌云志功成名就
求得一朝衣襟风光宦游
羡煞雁塔名三甲夺首
今秉烛夜游登明月楼头
曳紫蟒清风飒爽盈袖
得意如是消闲愁

未觉流年分寒暑夜昼
红尘沧桑若白云苍狗
苦读饮墨致文情苑囿
洗砚染池梅香墨痕长留
万篇谋策复癫狂未休
访先达鸿儒授拧眉骚首
滞涩通文少年已老朽
才换得一字能称才曰秀
寒窗蛰守痴既往难咎
翰林文墨消得容颜孱瘦
纵愿凌云志功成名就
求得一朝衣襟风光宦游
羡煞雁塔名三甲夺首
今秉烛夜游登明月楼头
曳紫蟒清风飒爽盈袖
得意如是消闲愁

寒窗蛰守痴既往难咎
翰林文墨消得容颜孱瘦
纵愿凌云志闻达诸侯
求得一朝衣襟风光宦游
素昧龙庭题金榜殿奏
今跨马携酒春风长安游
耀门楣承望膏粱锦绣
得意如是名利收

马黑黑 发表于 2022-8-24 17:45

这个画布设置没问题了

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

马黑黑发表于 2022-8-24 17:45
这个画布设置没问题了

那就好。

红影发表于 2022-8-24 18:54

又是泡泡效果，漂亮{:4_187:}

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

队长这个我手机好像看不见其他效果

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

红影发表于 2022-8-24 18:54
又是泡泡效果，漂亮

是啊。

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

小辣椒发表于 2022-8-24 19:00
队长这个我手机好像看不见其他效果

有泡泡效果的。

小辣椒 发表于 2022-8-24 20:23

加林森发表于 2022-8-24 19:15
有泡泡效果的。

电脑上来看见了{:4_199:}

加林森 发表于 2022-8-24 20:24

小辣椒发表于 2022-8-24 20:23
电脑上来看见了

还可以吧。

小辣椒 发表于 2022-8-24 20:26

加林森发表于 2022-8-24 20:24
还可以吧。

队长发现你做泡泡效果很多个吧

加林森 发表于 2022-8-24 20:36

小辣椒发表于 2022-8-24 20:26
队长发现你做泡泡效果很多个吧

为了完成任务啊。以后不做了。

千羽发表于 2022-8-24 21:03

我没看到泡泡效果……{:4_203:}

千羽发表于 2022-8-24 21:06

现在看到了，飘亮{:4_187:}

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

千羽发表于 2022-8-24 21:03
我没看到泡泡效果……

嗯嗯

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

千羽发表于 2022-8-24 21:06
现在看到了，飘亮

喜欢就好。

千羽发表于 2022-8-24 21:57

加林森发表于 2022-8-24 21:56
喜欢就好。

嗯，后来看到了，挺好{:4_204:}

加林森 发表于 2022-8-24 21:59

千羽发表于 2022-8-24 21:57
嗯，后来看到了，挺好

嗯嗯。以后我不做这个了。

千羽发表于 2022-8-24 22:01

加林森发表于 2022-8-24 21:59
嗯嗯。以后我不做这个了。

要坚持哦{:4_203:}

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

千羽发表于 2022-8-24 22:01
要坚持哦

换花样玩。

页: [1] 2

花潮论坛's Archiver

《殿书》- 奇然