Anh Là Cố Chấp Duy Nhất Của Đời Em
<style>#mydiv { margin: 150px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://www.xlaj.cn/assets/file/zp/20240413222809.gif') no-repeat center/cover; box-shadow: 3px 3px 6px #333; position: relative; z-index: 1; }
#play { position: absolute; width: 100px; top: 462px; cursor: pointer; left: 630px; animation: rot 5s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
#dt3{ position: absolute; width: 32px; height: 32px; top: 183px; left: 700px; }
#dt5{ position: absolute; width: 32px; height: 32px; top: 75px; left: 925px; }
</style>
<div id="mydiv">
<img id="dt3" src="https://www.xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" />
<img id="dt5" src="https://www.xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" />
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/8e/83/b7/b95506a5f4b21f27d0c2a3bca14b6dfe/audio.mp3" autoplay></audio>
<img id="play" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" alt="" />
</div>
<script>
var canv = document.createElement('canvas');
var ww = canv.width = mydiv.offsetWidth;
var hh = canv.height = mydiv.offsetHeight;
canv.style.cssText = `position: absolute'; left: 0; top: 0; cursor: crosshair`;
mydiv.prepend(canv);
var ctx = canv.getContext('2d');
var balls = [];
var raf = null;
var speed = () => (Math.random() < 0.5 ? -1 : 1) * (Math.random() * 0.5 + 0.5);
var mState = () => {
aud.paused ?
(mydiv.style.setProperty('--state', 'paused'), cancelAnimationFrame(raf)) :
(mydiv.style.setProperty('--state', 'running'), render());
};
var innerCircle = (ex,ey,cx,cy,r) => Math.sqrt((ex - cx) ** 2 + (ey - cy) ** 2) <= r;
var drawBall = (x,y,r,color) => {
ctx.save();
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fill();
ctx.restore();
};
var move = (ball) => {
var x = ball.x, y = ball.y, r = ball.r, color = ball.color, spdX = ball.speedX, spdY = ball.speedY;
x += spdX;
y += spdY;
if(x - r < 0 || x + r > ww) spdX = - spdX;
if(y - r < 0 || y + r > hh) spdY = - spdY;
ball.x = x;
ball.y = y;
ball.speedX = spdX;
ball.speedY = spdY;
drawBall(x,y,r,color);
};
var render = () => {
ctx.clearRect(0,0,ww,hh);
for(var j = 0; j < balls.length; j ++) {
for(var k = 0; k < balls.length; k ++) {
var dx = balls.x - balls.x, dy = balls.y - balls.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if(distance < (balls.r + balls.r)) {
balls.speedX = -balls.speedX;
balls.speedY = -balls.speedY;
balls.speedX = -balls.speedX;
balls.speedY = -balls.speedY;
}
}
move(balls);
}
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
};
var initBalls = (total) => {
for (var j = 0; j < total; j ++) {
var x = Math.random() * (ww - 200) + 50, y = Math.random() * (hh - 100) + 30, r = Math.random() * 5 + 5, color = '#' + Math.random().toString(16).substr(-6), spdx = speed(), spdy = speed();
balls.push({x: x, y: y, r: r, color: color, speedX: spdx, speedY: spdy});
move(balls);
}
};
aud.loop = false;
aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => cancelAnimationFrame(raf);
aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };
play.onclick = () => aud.paused ? aud.play() : aud.pause();
canv.onclick = (e) => {
var x = e.offsetX, y = e.offsetY;
for(var j = 0; j < balls.length; j ++) {
if(innerCircle(x, y, balls.x, balls.y, balls.r)) {
if(balls.r < 20) balls.r += 2;
balls.color = `#${Math.random().toString(16).substr(-6)}`;
}
}
};
initBalls(40);
</script>
歌曲中文名字
你是我唯一的执着
同一首了
bgmnet{:5_127:}
很漂亮，不过只能看到一半;P 無名 发表于 2024-4-13 22:18
很漂亮，不过只能看到一半
这个链接是我的无限制空间上传的，我问了空间商，对方说应该可以看见的，我美国，澳大利亚的朋友都可以看见啊，不知道你为什么看不见 無名 发表于 2024-4-13 22:18
很漂亮，不过只能看到一半
我现在重新上传了你看看有没有图片出来 哇塞漂亮真的很漂亮 音乐也好听{:5_117:}{:5_147:} 小辣椒 发表于 2024-4-13 22:29
我现在重新上传了你看看有没有图片出来
有了。。。 漂亮的粒子双频谱，底图音频频谱 画面彩色小粒子{:5_150:} 记得这首歌有发过，是同一首
页:
[1]
2