基本信息
源码名称：js实现不断生成上升的气泡
源码大小：3.63KB
文件格式：.html
开发语言：js
更新时间：2018-07-25
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍
原生js写的气泡特效




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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%), url(https://www.grandvincent-marion.fr/_codepen/tropical-login-form.jpg);
        }

        .soda {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            perspective: 50vw;
            transform: translateZ(-99999px);
            transform-style: preserve-3d;
            z-index: 1;
        }

        .bubble {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-image: radial-gradient(rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 1) 80%);
            transform: translateX(-50%);
            will-change: top, left;
        }

        .bubble::after {
            content: '';
            position: absolute;
            top: 20%;
            right: 25%;
            width: 33%;
            height: 33%;
            border: 3px solid;
            border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent;
            border-radius: 50%;
            transform: rotate(45deg);
        }
    </style>
   
</head>

<body>
    <div class='soda'>
    </div>
</body>
<script>
    // const
        floatOn = (options) => {
            // let
                el = options.el,
                x = options.x,
                xIsPos = options.xIsPos || Math.floor(Math.random()),
                updateX = options.updateX || Math.floor(Math.random()),
                curTop = parseInt(el.style.top),
                curLeft = parseInt(el.style.left);

            if (curTop > -50) {
                el.style.top = `${--curTop}px`;
            } else {
                el.style.top = `${innerHeight   50}px`;
            }

            if (updateX) {
                if (xIsPos) {
                    if (curLeft > x   10) {
                        xIsPos = false;
                    } else {
                        el.style.left = `${  curLeft}px`;
                    }
                } else {
                    if (curLeft < x - 10) {
                        xIsPos = true;
                    } else {
                        el.style.left = `${--curLeft}px`;
                    }
                }
            }

            updateX = updateX ? false : true;

            requestAnimationFrame(floatOn.bind(null, { el: el, x: x, xIsPos: xIsPos, updateX: updateX }));
        };

    class Bubble {
        constructor(target, i) {
            this.bubble = document.createElement('div');
            this.bubble.classList.add('bubble');
            this.x = Math.floor(Math.random() * innerWidth);
            this.y = Math.floor(Math.random() * innerHeight);
            this.scale = Math.random();
            this.pos = Math.round(Math.random());

            this.bubble.style.top = `${this.y}px`;
            this.bubble.style.left = `${this.x}px`;
            this.bubble.style.transform = `translateZ(${this.pos ? '' : '-'}${this.scale.toFixed(2) * 1000}px)`;

            setTimeout(() => { target.appendChild(this.bubble); }, i * 50);
            setTimeout(floatOn.bind(null, { el: this.bubble, x: this.x }), i * 50);
        }
    }

    for (let i = 0; i < 100; i  ) {
        new Bubble(document.querySelector('.soda'), i);
    }
</script>
</html>