<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-7-4 21:04
是的，把基础打牢了才行。
必须的 本帖最后由 加林森 于 2022-8-16 21:05 编辑 <br /><br />马黑黑 发表于 2022-7-4 21:22
必须的
嗯嗯，所以我才会这样努力的。
</span>position: relative;</div><div><span style="white-space:pre"> </span>left: -420px;</div><div><span style="white-space:pre"> </span>top:150px;</div><div><span style="white-space:pre"> </span>width: 1440px;</div><div><span style="white-space:pre"> </span>height: 974px;</div><div><span style="white-space:pre"> </span>overflow: hidden;</div><div>}</div><div><br></div><div>.shipin {</div><div> position: absolute;</div><div> left: 302px;</div><div> top:80px;</div><div> width: 720px;</div><div> height: 402px;</div><div> object-fit: cover; </div><div>}</div><div>.bjtu {</div><div> position: absolute;</div><div> width: 1440px;</div><div> height: 974px;</div><div> </div><div>}</div><div></style></div><div><br></div><div><div class="ces"></div><div> <video class="shipin" src="http://kvideo01.youju.sohu.com/59d87641-8763-45c8-8e5a-f0420f25a86e1_0_0.mp4" controls="controls" autoplay="autoplay" loop="loop"></video></div><div> <div class="bjtu"></div><div> <img alt="" src="https://pic.imgdb.cn/item/62fb948016f2c2beb1161de0.png"/></div></div><div></div><br><br><br><br><br><br><br><br><br><br><br></div><div><br></div><div><br></div> 这声线真好。。。{:5_116:} 东篱闲人 发表于 2022-7-4 22:04
这声线真好。。。
是的。我感觉好听就制作出来了！ 加林森 发表于 2022-7-4 21:14
哪里哦。比你还差远了。
哪里啊很厉害了 加林森 发表于 2022-7-4 22:02
嗯嗯，所以我才会这样努力的。
挺好，注意不要太沉迷{:4_170:} 马黑黑 发表于 2022-7-4 22:34
挺好，注意不要太沉迷
变成了迷丝你娃了。 加林森 发表于 2022-7-4 22:17
是的。我感觉好听就制作出来了！
嗯嗯，教授是捕捉美的小能手。。。{:5_116:} 东篱闲人 发表于 2022-7-5 12:54
嗯嗯，教授是捕捉美的小能手。。。
老兄厉害啊。。。这个都被你发现了。{:4_189:} 加林森 发表于 2022-7-5 12:58
老兄厉害啊。。。这个都被你发现了。
嗯嗯，你是天天捉美，手有余香。。。 东篱闲人 发表于 2022-7-5 13:02
嗯嗯，你是天天捉美，手有余香。。。
你才是呢。发那么多的美女出来玩，你就更香了。。。。{:4_170:}
页:
1
[2]