¿Cómo hacer un fondo de burbujas usando HTML5 y CSS3?

La animación de fondo de burbujas de agua se puede generar fácilmente usando HTML, CSS JavaScript. Al usar HTML5, diseñaremos la parte básica del cuerpo de la página y con CSS3 haremos las burbujas en el fondo. Y con la ayuda de JavaScript, se moverá por toda la página de abajo hacia arriba.
Acercarse: 
 

La idea básica es crear una sección usando el elemento <lspan>, darle una forma redonda y luego usando la propiedad de animación CSS translateY, la burbuja se puede mover de abajo hacia arriba a lo largo del eje Y. Se pueden seguir los siguientes pasos para obtener el resultado deseado. Cree el cuerpo usando etiquetas HTML simples.

Haga una sección en la etiqueta del cuerpo y luego escriba algo que se mostrará en el cuerpo de la página.

  • Código HTML: En esta sección, diseñaremos una estructura de cuerpo simple: 
     

html

<!DOCTYPE html>
<html>
    <body>
        <section>
            <h2>GeeksforGeeks</h2>
        </section>
    </body>
</html>
  • Parte CSS: Usando CSS podemos hacer las burbujas en el fondo. En primer lugar, arreglamos la parte del cuerpo con margen, relleno y estilo de fuente. Luego intentaremos arreglar el fondo y usar algunos atributos como posición, altura, ancho, color de fondo, posición del texto, etc. Luego intentaremos hacer las burbujas en el fondo. Como es una especie de efecto de desplazamiento, usaremos span y span: antes de fijar la posición de la burbuja, luego arreglaremos el fondo como transparente y le daremos un borde como si fuera una burbuja de agua, luego tenemos que agregar alguna animación como «animar 4s gradiente lineal» para animarlo. Y lo último de la parte CSS, usaremos la animación @Keyframes para mover las burbujas a lo largo del eje y.

css

<style>
    * {
        margin: 0;
        padding: 0;
        font-family: consolas;
    }
    section {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background: #111;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    section h2 {
        font-size: 10em;
        color: #333;
    }
    section span {
        position: absolute;
        bottom: -50px;
        background: transparent;
        border-radius: 50%;
  
        pointer-events: none;
        box-shadow: inset 0 0 10px rgba(225, 225, 225, 0.5);
        animation: animate 4s linear infinite;
    }
    sectionspan: before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        transform: scale(0.25) translate(-70%, -70%);
        background: radial-gradient(#ffffff, transparent);
        border-radius: 50%;
    }
    @keyframes animation {
        0% {
            transform: translateY(0%);
            opacity: 1;
        }
        99% {
            opacity: 1;
        }
        100% {
            transform: translateY(-1200%);
            opacity: ;
        }
    }
</style>
  • JavaScript: 
     

Por último, usamos JavaScript para mover las burbujas de abajo hacia arriba de la página. Y le dará un encanto y se verá como vivo. Tomaremos create a function named para crear una burbuja y escribir algo de código. le daremos animación y estableceremos el tiempo y, por último, agregaremos setInterval (createBubble, 100) ya que las burbujas se pueden mover de abajo hacia arriba. Si no agregamos esto, la burbuja se generará en la parte inferior de la página, pero no se moverá a la parte superior sino que se seguirá generando.

  • Código JavaScript: aquí veremos cómo mover las burbujas: 
     

javascript

<script type="text/javascript">
    function createBubble() {
        const section = document.querySelector("Section");
        const createElement = document.createElement("span");
        var size = Math.random() * 60;
  
        createElement.style.animation = 
          "animation 6s linear infinite";
        createElement.style.width = 180 + size + "px";
        createElement.style.height = 180 + size + "px";
        createElement.style.left = 
          Math.random() * innerWidth + "px";
        section.appendChild(createElement);
  
        setTimeout(() => {
            createElement.remove();
        }, 4000);
    }
    setInterval(createBubble, 100);
</script>

Código completo: 
 

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" 
              content="width=device-width,
                       initial-scale=0.1" />
        <style>
            * {
                margin: 0;
                padding: 0;
                font-family: consolas;
            }
            section {
                position: relative;
                width: 100%;
                height: 100vh;
                overflow: hidden;
                background: #111;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            section h2 {
                font-size: 10em;
                color: #333;
            }
            section span {
                position: absolute;
                bottom: -50px;
                background: transparent;
                border-radius: 50%;
  
                pointer-events: none;
                box-shadow: inset 0 0 10px 
                  rgba(225, 225, 225, 0.5);
                animation: animate 4s linear infinite;
            }
            sectionspan: before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                transform: scale(0.25) translate(-70%, -70%);
                background: 
                  radial-gradient(#ffffff, transparent);
                border-radius: 50%;
            }
            @keyframes animation {
                0% {
                    transform: translateY(0%);
                    opacity: 1;
                }
                99% {
                    opacity: 1;
                }
                100% {
                    transform: translateY(-1200%);
                    opacity: ;
                }
            }
        </style>
    </head>
    <body>
        <section>
            <h2>GeeksforGeeks</h2>
        </section>
        <script type="text/javascript">
            function createBubble() {
                const section = 
                      document.querySelector("Section");
                const createElement = 
                      document.createElement("span");
                var size = Math.random() * 60;
  
                createElement.style.animation = 
                  "animation 6s linear infinite";
                createElement.style.width = 180 + size + "px";
                createElement.style.height = 180 + size + "px";
                createElement.style.left = 
                  Math.random() * innerWidth + "px";
                section.appendChild(createElement);
  
                setTimeout(() => {
                    createElement.remove();
                }, 4000);
            }
            setInterval(createBubble, 100);
        </script>
    </body>
</html>

Producción: 
 

Publicación traducida automáticamente

Artículo escrito por chalti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *