在线体验：https://www.u55u.cn/waps/niunai/

纵享丝滑，让你的网页有像牛奶一样的效果。今天在B站看到了这么一个项目，通过js、和css的动画就简单实现了牛奶效果，以下是他的html源码部分

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>牛奶泡泡</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="circle">
        <svg>
            <filter id="gooey">
                <feGaussianBlur in="SourceGraphic" stdDeviation = "10"/>
                <feColorMatrix values ="1 0 0 0 0
                                        0 1 0 0 0
                                        0 0 1 0 0
                                        0 0 0 50 -10"/>
            </filter>
        </svg>
    </div>
    <script>
        let circle = document.querySelector(".circle");
        circle.addEventListener('click', function () {
            for (let i = 0; i < 50; i++) {
                let particles = document.createElement("i");
                particles.classList.add('particles');
                document.body.appendChild(particles);
                let randomX = (Math.random() - 0.5) * window.innerWidth;
                let randomY = (Math.random() - 0.5) * window.innerHeight;
                particles.style.setProperty('--x', randomX + "px");
                particles.style.setProperty('--y', randomY + "px");
                let randomSize = Math.random() * 60 + 10;
                particles.style.width = randomSize + "px";
                particles.style.height = randomSize + "px";
                let duration = Math.random() * 3 + 2;
                particles.style.animation = `animate ${duration}s ease forwards`;
                setTimeout(function () {
                    particles.remove();
                }, 5000)
            }
        })
    </script>
</body>

</html>

css代码部分

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1d2b3a;
    overflow: hidden;
    filter: url(#gooey);
}

.circle {
    position: relative;
    width: 200px;
    height: 200px;
    background: linear-gradient(90deg, #04ee79, #0684ec);
    border-radius: 50%;
    cursor: pointer;
}

.particles {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(90deg, #04ee79, #0684ec);
    z-index: -1;
}

@keyframes animate {

    0%,
    100% {
        transform: translate(0, 0);
    }
    50%{
        transform: translate(var(--x),var(--y));
    }
}

svg{
    width: 0;
    height: 0;
}

通过简单的集合，你就能实现牛奶泡泡了

THE END
© 版权声明
如无特殊说明，则文章内容为原创内容
如果需要进行分享，请注明来源，谢谢！
文章内容若牵扯到贵司、个人的合法权益，请联系（2933117423）删除