|
|
楼主 |
发表于 2022-8-18 13:00
|
显示全部楼层
代码（全）：
- <style>
- #papa { left: -214px; width: 1024px; height: 640px; display: grid; place-items: center; background: #000 url('/data/attachment/forum/202208/18/125530ma3dvflfbv915vtw.jpg') no-repeat center/cover; box-shadow: 3px 3px 30px #000; position: relative; }
- #canv { position: relative; top: 0; left: 0; opacity: .65; }
- #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>
- </head>
- <body>
- <div id="papa">
- <span id="disc"></span>
- <span id="lrcbox">域外之音</span>
- <canvas id="canv" width="1024" height="640"></canvas>
- </div>
- <script>
- let ctx = canv.getContext('2d');
- let w = canv.width,
- h = canv.height,
- tick = 0,
- particles = [];
- let opts = {
- baseBaseSize: 15,
- addedBaseSize: 5,
- baseVel: 2,
- addedVel: 1,
- baseTime: 60,
- addedTime: 20,
- overTime: 5,
- sliding: .99,
- particleChance: .9,
- particles: 100,
- templateParticleColor: 'hsla(hue,80%,40%,alp)',
- repaintAlpha: 'rgba(0,0,0,.1)',
- startColor: .2,
- fullColor: .5,
- stopColor: .6,
- timeToColorChange: 3
- };
- let aud = new Audio();
- aud.src = 'https://music.163.com/song/media/outer/url?id=1906487836.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 Particle() {
- this.reset();
- }
- Particle.prototype.reset = function() {
- this.x = Math.pow(Math.random(), 1 / 4);
- this.y = h / 2;
- var color = opts.templateParticleColor.replace('hue', this.x * 360 * 2 + tick * opts.timeToColorChange);
- this.baseSize = (Math.random() + this.x) / 2 * (opts.baseBaseSize + opts.addedBaseSize * Math.random());
- this.gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.baseSize / 2);
- this.gradient.addColorStop(opts.startColor, color.replace('alp', 0));
- this.gradient.addColorStop(opts.fullColor, color.replace('alp', 1));
- this.gradient.addColorStop(opts.stopColor, color.replace('alp', 1));
- this.gradient.addColorStop(1, color.replace('alp', 0));
- this.vx = -(1 + Math.random() / 10 - this.x) * (opts.baseVel + Math.random() * opts.addedVel);
- this.vy = Math.pow(this.x, 4) * (opts.baseVel + Math.random() * opts.addedVel) * (Math.random() < .5 ? -1 : 1);
- this.x *= w / 2;
- if (Math.random() < .5) {
- this.x = w - this.x;
- this.vx *= -1;
- }
- this.time = opts.baseTime + opts.addedTime * Math.random();
- this.tick = this.time + opts.overTime;
- };
- Particle.prototype.step = function() {
- var size;
- if (this.tick <= this.time) {
- this.x += this.vx *= opts.sliding;
- this.y += this.vy *= opts.sliding;
- size = Math.pow(this.tick / this.time, 1 / 2)
- } else size = 1 - ((this.tick - this.time) / opts.overTime) + .000001;
- --this.tick;
- ctx.translate(this.x, this.y);
- ctx.scale(size, size);
- ctx.fillStyle = this.gradient;
- ctx.fillRect(-this.baseSize / 2, -this.baseSize / 2, this.baseSize, this.baseSize);
- ctx.scale(1 / size, 1 / size);
- ctx.translate(-this.x, -this.y);
- if (this.tick <= 0) this.reset();
- };
- (function anim() {
- window.requestAnimationFrame(anim);
- ctx.globalCompositeOperation = 'source-over';
- ctx.fillStyle = opts.repaintAlpha;
- ctx.fillRect(0, 0, w, h);
- ctx.globalCompositeOperation = 'lighter';
- ++tick;
- if (particles.length < opts.particles && Math.random() < opts.particleChance) particles.push(new Particle);
- particles.map(function(particle) {
- particle.step();
- });
- })();
- </script>
|
|
发表于 2022-8-18 12:57
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2022-8-18 13:55
发表于 2022-8-18 18:53
