本帖最后由 加林森 于 2022-8-19 20:56 编辑 <br /><br />红影 发表于 2022-6-14 22:49
其实只要一句句做下去，也就做完了
就是。这个就是考耐心的。
<style>
#papa { left: -214px; width: 1024px; height: 790px; background: #000 url('https://pic.imgdb.cn/item/62ff881a16f2c2beb14ecc91.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="790"></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=449578813.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-6-13 20:35
好玩不。
很好玩可惜我做不来。{:4_198:}
樵歌 发表于 2022-6-15 06:41
很好玩可惜我做不来。
老兄你欣赏就行了嘛。
加林森 发表于 2022-6-15 08:30
老兄你欣赏就行了嘛。
我也是觉得这样很是舒坦。{:4_174:}
樵歌 发表于 2022-6-15 17:21
我也是觉得这样很是舒坦。
对头！{:4_170:}
加林森 发表于 2022-6-14 22:53
就是。这个就是考耐心的。
好在歌曲大都不长，最多3、4分钟的事{:4_173:}
红影 发表于 2022-6-15 19:42
好在歌曲大都不长，最多3、4分钟的事
是的。
加林森 发表于 2022-6-15 17:23
对头！
早上好{:4_190:}
樵歌 发表于 2022-6-16 06:27
早上好
早晨好！{:4_180:}
加林森 发表于 2022-6-14 21:44
千羽你也可以制作的嘛。
俺不会{:4_203:}
千羽 发表于 2022-6-16 20:25
俺不会
不会就做自己喜欢的就行了。
加林森 发表于 2022-6-16 20:35
不会就做自己喜欢的就行了。
嗯，队长晚上好{:4_187:}
千羽 发表于 2022-6-16 20:38
嗯，队长晚上好
千羽晚上好。{:4_190:}
加林森 发表于 2022-6-16 08:35
早晨好！
早上好，我早上不能出去锻炼的，一般是傍晚，因为早上心脏最容易出问题，大医生说的。
樵歌 发表于 2022-6-17 06:25
早上好，我早上不能出去锻炼的，一般是傍晚，因为早上心脏最容易出问题，大医生说的。
听医生的。