背景气泡

再水一群教程

效果图：

不多说老规矩代码如下：

css代码如下：

/*背景图片*/
body:before {
    content:"";
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:url(https://vi2.xiu123.cn/live/2023/10/18/21/1001v1697636328652330460.jpg) center 0 no-repeat;
    background-size:cover;
}
/* 背景泡泡 */
body {
    position:relative;
    overflow-x:hidden;
    height:100vh;
}
guigui {
    position:absolute;
    bottom:0;
    background:radial-gradient(circle at 72% 28%,#fff 3px,#ff7edf 8%,#5b5b5b,#aad7f9 100%);
    box-shadow:inset 0 0 6px #fff,inset 3px 0 6px #eaf5fc,inset 2px -2px 10px #efcde6,inset 0 0 60px #f9f6de,0 0 20px #fff;
    border-radius:50%;
    animation:guigui 4s linear infinite;
    transition:2s;
    z-index:1;
}
@keyframes guigui {
    0% {
    transform:translateY(0%);
    opacity:1;
}
50% {
    transform:translate(10%,-1000%);
}
75% {
    transform:translate(-20%,-1200%);
}
99% {
    opacity:.9;
}
100% {
    transform:translateY(-1800%) scale(1.5);
    opacity:0;
}
}

• js代码如下：

// 定时背景随机气泡
const bubleCreate = () => {
    const body = document.body
    const buble = document.createElement('guigui')
    let r = Math.random() * 5 + 25 //25~30
    buble.style.width = r + 'px'
    buble.style.height = r + 'px'
    buble.style.left = Math.random() * innerWidth + 'px'
    body.append(buble)
    setTimeout(() => {
        buble.remove()
    }, 4000)
}
setInterval(() => {
    bubleCreate()
}, 200);