加林森 发表于 2022-8-18 17:57

《外星球》- ✘ （学习老黑“域外之音”制作）


<style>
#papa { left: -353.5px; width: 1303px; height: 640px; display: grid; place-items: center; background: #000 url('https://pic.imgdb.cn/item/62fe083a16f2c2beb14eb47f.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="1303" 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=1419052950.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 17:58

@马黑黑

马黑黑 发表于 2022-8-18 18:08

队长厉害

加林森 发表于 2022-8-18 18:35

马黑黑 发表于 2022-8-18 18:08
队长厉害

不厉害的。这首歌曲比较欢快的。

马黑黑 发表于 2022-8-18 19:11

加林森 发表于 2022-8-18 18:35
不厉害的。这首歌曲比较欢快的。

不错不错

红影 发表于 2022-8-18 19:42

队长真快，这个做得漂亮。给队长点赞{:4_187:}

加林森 发表于 2022-8-18 20:04

马黑黑 发表于 2022-8-18 19:11
不错不错

嗯嗯。

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

红影 发表于 2022-8-18 19:42
队长真快，这个做得漂亮。给队长点赞

谢谢啦！

上海朝阳 发表于 2022-8-18 20:16

飞上月球放烟火呀，真美！

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

上海朝阳 发表于 2022-8-18 20:16
飞上月球放烟火呀，真美！

这个是中国未来的空间站。美吧。

小辣椒 发表于 2022-8-18 20:30

队长这个是黑黑今天分享的？我先去看看教程

小辣椒 发表于 2022-8-18 20:33

队长速度的，队长电脑修复了？

加林森 发表于 2022-8-18 20:39

小辣椒 发表于 2022-8-18 20:30
队长这个是黑黑今天分享的？我先去看看教程

是的。

加林森 发表于 2022-8-18 20:41

小辣椒 发表于 2022-8-18 20:33
队长速度的，队长电脑修复了？

还没有！我自己在修理。

加林森 发表于 2022-8-18 22:00

谢谢大家支持！

红影 发表于 2022-8-18 22:00

加林森 发表于 2022-8-18 20:05
谢谢啦！

这个效果真的好美呢{:4_204:}

青青子衿 发表于 2022-8-18 22:24

效果很好，感觉会出来外星球建筑，外星人等。。。。在想，科技太发达的星球，人们都干什么工作？人生目标又是什么呢？

青青子衿 发表于 2022-8-18 22:26

也有学校，工厂，街道，警察，和监狱吗。。。。？学什么呢？生产什么呢？

加林森 发表于 2022-8-19 08:34

红影 发表于 2022-8-18 22:00
这个效果真的好美呢

是的。

加林森 发表于 2022-8-19 08:35

青青子衿 发表于 2022-8-18 22:24
效果很好，感觉会出来外星球建筑，外星人等。。。。在想，科技太发达的星球，人们都干什么工作？人生目标又 ...

可以联想的。
页: [1] 2
查看完整版本: 《外星球》- ✘ （学习老黑“域外之音”制作）