小辣椒 发表于 2024-4-13 21:32

Anh Là Cố Chấp Duy Nhất Của Đời Em TO：朵拉


<style>
#mydiv { margin: 150px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://wj.zp68.com/lxx/yunhua/2024/04/13/lziF.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; }
#dt4{ position: absolute; width: 107px; height: 320px; top: 120px; left: 880px; }
#dt5{ position: absolute; width: 32px; height: 32px; top: 75px; left: 925px; }


</style>

<div id="mydiv">

<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" />
<img id="dt4" src="https://wj.zp68.com/lxx/yunhua/2024/04/13/01.png" alt="" />
<img id="dt5" src="https://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>

小辣椒 发表于 2024-4-13 21:33

@朵拉

谢谢朵拉的礼物，小辣椒现学做一个还礼了{:4_185:}

小辣椒 发表于 2024-4-13 21:34

中文歌曲名
你是我唯一的执着

小辣椒 发表于 2024-4-13 21:35

@马黑黑

现套用一个玩玩，纯套用了

走过岁月 发表于 2024-4-13 21:39

这么巧遇上小辣椒发新作品

走过岁月 发表于 2024-4-13 21:39

欣赏一下

走过岁月 发表于 2024-4-13 21:40

是粒子频谱吗

走过岁月 发表于 2024-4-13 21:41

漂亮的，不错的制作

小辣椒 发表于 2024-4-13 21:50

走过岁月 发表于 2024-4-13 21:39
这么巧遇上小辣椒发新作品

岁月来了，先来个大大的{:4_179:}

小辣椒 发表于 2024-4-13 21:50

走过岁月 发表于 2024-4-13 21:39
欣赏一下

谢谢岁月欣赏

小辣椒 发表于 2024-4-13 21:51

走过岁月 发表于 2024-4-13 21:40
是粒子频谱吗

自己图做的是粒子频谱，加了黑黑的代码粒子效果

小辣椒 发表于 2024-4-13 21:51

走过岁月 发表于 2024-4-13 21:41
漂亮的，不错的制作

谢谢岁月夸奖{:4_173:}

马黑黑 发表于 2024-4-13 21:57

小辣椒 发表于 2024-4-13 21:35
@马黑黑

现套用一个玩玩，纯套用了

{:4_199:}

马黑黑 发表于 2024-4-13 21:58

帖子的设计匠心独运，效果耐人寻味。好作品！

小辣椒 发表于 2024-4-13 22:00

马黑黑 发表于 2024-4-13 21:57


黑黑晚上好

小辣椒 发表于 2024-4-13 22:01

马黑黑 发表于 2024-4-13 21:58
帖子的设计匠心独运，效果耐人寻味。好作品！

谢谢黑黑的教程分享，套用玩一个，感觉这个粒子太漂亮了，就用了我的频谱背景的图图

马黑黑 发表于 2024-4-13 22:02

小辣椒 发表于 2024-4-13 22:01
谢谢黑黑的教程分享，套用玩一个，感觉这个粒子太漂亮了，就用了我的频谱背景的图图

这个例子昨晚弄出来的

马黑黑 发表于 2024-4-13 22:02

小辣椒 发表于 2024-4-13 22:00
黑黑晚上好

一起嚎一起嚎

小辣椒 发表于 2024-4-13 22:03

马黑黑 发表于 2024-4-13 22:02
一起嚎一起嚎

嚎完睡觉去了{:4_173:}

马黑黑 发表于 2024-4-13 22:04

小辣椒 发表于 2024-4-13 22:03
嚎完睡觉去了

好哒
页: [1] 2
查看完整版本: Anh Là Cố Chấp Duy Nhất Của Đời Em TO：朵拉