本帖最后由 加林森 于 2022-8-24 17:38 编辑 <br /><br />红影 发表于 2022-7-10 22:26
我们这今天这样的热法史上罕见。
我们这里是80年来的罕见的热！
<style>
#papa { left: -214px; width: 1024px; height: 577px; background: #000 url('https://pic.imgdb.cn/item/6305f12c16f2c2beb19439f4.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="577"></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=420008229.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-7-10 22:29
我们这里是80年来的罕见的热！
还没入伏就这么热，真正的三伏天不知道怎么熬了{:4_173:}
红影 发表于 2022-7-11 14:34
还没入伏就这么热，真正的三伏天不知道怎么熬了
今天报道的是：未来十天还要升温到四十都以上。{:5_113:}
加林森 发表于 2022-7-11 15:41
今天报道的是：未来十天还要升温到四十都以上。
真是一段难熬的日子。
红影 发表于 2022-7-11 16:39
真是一段难熬的日子。
就是。