空の境 （学习老黑“夏日气泡”制作）
<style>
#papa { left: -214px; width: 1024px; height: 640px; background: #000 url('https://pic.imgdb.cn/item/62fcf61716f2c2beb1c96347.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">纯音乐 - 空の境</span>
<span id="disc"></span>
<canvas id="canv" width="1024" height="640"></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=1868355364.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-17 22:27
好有质感。
谢谢支持！晚上好！ 加林森 发表于 2022-8-17 22:30
谢谢支持！晚上好！
可惜要用手机查看。有些帖子可以看到。 欣赏队长好作品 鼠标划过，好多气泡。欣赏队长好帖{:4_187:} 沐风 发表于 2022-8-17 22:32
可惜要用手机查看。有些帖子可以看到。
不着急的。 马黑黑 发表于 2022-8-17 22:41
欣赏队长好作品
老黑晚上好。我这个破电脑整得我现在才能制作，真的有点晕了。 红影 发表于 2022-8-17 23:00
鼠标划过，好多气泡。欣赏队长好帖
我都是跟到学习的。 加林森 发表于 2022-8-17 23:34
老黑晚上好。我这个破电脑整得我现在才能制作，真的有点晕了。
CPU散热的问题处理了木有呢 马黑黑 发表于 2022-8-17 23:39
CPU散热的问题处理了木有呢
现在还没有处理好。我不知道该怎么弄的。{:5_102:} 加林森 发表于 2022-8-17 23:41
现在还没有处理好。我不知道该怎么弄的。
这个要会拆，先从主板拆除散热片连风扇，再将风扇从散热片上拆出来。然后依次清理散热片和风扇。如果风扇轴缺油了，还要拆风扇放黄油。一切都很专业，不过可以看视频学习。 马黑黑 发表于 2022-8-17 23:43
这个要会拆，先从主板拆除散热片连风扇，再将风扇从散热片上拆出来。然后依次清理散热片和风扇。如果风扇 ...
嗯嗯。这个我完全不懂的。明天找专业的来搞。 @小辣椒 加林森 发表于 2022-8-17 23:46
嗯嗯。这个我完全不懂的。明天找专业的来搞。
嗯嗯，自己不会的话不要瞎折腾 马黑黑 发表于 2022-8-17 23:51
嗯嗯，自己不会的话不要瞎折腾
这个不敢的。我只知道系统可以重装的。 加林森 发表于 2022-8-17 23:53
这个不敢的。我只知道系统可以重装的。
你装系统太慢了。最多一个钟应该可以搞定一切。 马黑黑 发表于 2022-8-18 12:22
你装系统太慢了。最多一个钟应该可以搞定一切。
原来安装系统时没有留下备份，也就没有一键恢复的。 加林森 发表于 2022-8-18 13:17
原来安装系统时没有留下备份，也就没有一键恢复的。
我们现在都不怎么用系统恢复或还原的方法了，都是全新安装。 马黑黑 发表于 2022-8-18 18:14
我们现在都不怎么用系统恢复或还原的方法了，都是全新安装。
嗯嗯。可能要换零件了。
页:
[1]
2