¿Cómo crear una animación de borde usando CSS?

Posted on by Rudeus Greyrat

La animación de borde CSS usando el desplazamiento se usa para crear una animación de borde cuando pasamos el cursor sobre un texto. Los conceptos que vamos a utilizar son los selectores before , after y hover . Se recomienda encarecidamente pasar por todos estos selectores antes de avanzar más en este artículo.

Enfoque: El enfoque de esta animación es dividir la animación en dos partes. La parte superior y la derecha se harán al mismo tiempo usando el selector antes, la parte inferior y la izquierda se harán al mismo tiempo usando el selector después.

Código HTML: hemos creado un archivo HTML y creamos un div en él con h1 dentro de div. A continuación se muestra el código para el mismo.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks</title>
</head>
  
<body>
    <div class="geeks">
        <h1>GeeksforGeeks</h1>
    </div>
</body>
  
</html>

Código CSS: El CSS para esta animación es un poco complicado, así que tratemos de entenderlo paso a paso.

Paso 1: lo primero que hemos hecho es proporcionar un fondo básico y alinear nuestro texto en el centro. A continuación se muestra el código para el mismo.

body {
    margin: 0;
    padding: 0;
    background: green;
}
  
.geeks {
    left: 40%;
    top: 40%;
    position: absolute;
    width: 300px;
    text-align: center;
}
  
h1 {
    position: relative;
}

Paso 2: El segundo paso es crear un borde superior y derecho.

  • Lo primero es crear un borde con un fondo transparente.
  • Luego anímalo pasando el mouse dándole una animación lineal y un nombre de identificador como animado.
  • Ahora, usando fotogramas clave, animaremos el borde. Asegúrese de aplicar color solo en el lado superior y derecho del borde. Primero, hemos aumentado el ancho de la animación del borde superior y la altura de la animación del borde derecho.
.geeks::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 0;
    background: transparent;
    border: 2px solid transparent;
}
 
.geeks:hover::before {
    animation: animate 1s linear forwards;
}
 
@keyframes animate {
    0% {
        width: 0;
        height: 0;
        border-top-color: black;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
 
    50% {
        width: 100%;
        height: 0;
        border-top-color: black;
        border-right-color: black;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
 
    100% {
        width: 100%;
        height: 100%;
        border-top-color: black;
        border-right-color: black;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}

Paso 3: Repita el paso 2 con el selector posterior. Algunos puntos clave para recordar durante este paso son:

  • Asegúrese de que la parte superior y la derecha sean transparentes y la izquierda y la parte inferior estén coloreadas.
  • Para la izquierda, la altura aumentará y para la parte inferior, el ancho aumentará.
  • Asegúrese de usar un nombre diferente para el identificador de fotogramas clave en este paso.
.geeks::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 0;
    background: transparent;
    border: 2px solid transparent;
}
 
.geeks:hover::after {
    animation: animates 1s linear forwards;
}
 
@keyframes animates {
    0% {
        width: 0;
        height: 0;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: black;
    }
 
    50% {
        width: 0;
        height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: black;
        border-left-color: black;
    }
 
    100% {
        width: 100%;
        height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: black;
        border-left-color: black;
    }
}

Código CSS completo:

<style>
    body {
        margin: 0;
        padding: 0;
        background: green;
    }
  
    .geeks {
        left: 40%;
        top: 40%;
        position: absolute;
  
        width: 300px;
        text-align: center;
    }
  
    h1 {
        position: relative;
    }
  
    .geeks::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        width: 0;
        height: 0;
        background: transparent;
        border: 2px solid transparent;
    }
  
    .geeks:hover::before {
        animation: animate 1s linear forwards;
    }
  
    @keyframes animate {
        0% {
            width: 0;
            height: 0;
            border-top-color: black;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
  
        50% {
            width: 100%;
            height: 0;
            border-top-color: black;
            border-right-color: black;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
  
        100% {
            width: 100%;
            height: 100%;
            border-top-color: black;
            border-right-color: black;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
    }
  
    .geeks::after {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        width: 0;
        height: 0;
        background: transparent;
        border: 2px solid transparent;
    }
  
    .geeks:hover::after {
        animation: animates 1s linear forwards;
    }
  
    @keyframes animates {
        0% {
            width: 0;
            height: 0;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: black;
        }
  
        50% {
            width: 0;
            height: 100%;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: black;
            border-left-color: black;
        }
  
        100% {
            width: 100%;
            height: 100%;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: black;
            border-left-color: black;
        }
    }
</style>

Código Completo: Es la combinación de ambos códigos HTML y CSS.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: green;
        }
  
        .geeks {
            left: 40%;
            top: 40%;
            position: absolute;
  
            width: 300px;
            text-align: center;
        }
  
        h1 {
            position: relative;
        }
  
        .geeks::before {
            content: "";
            position: absolute;
            top: -2px;
            left: -2px;
            width: 0;
            height: 0;
            background: transparent;
            border: 2px solid transparent;
        }
  
        .geeks:hover::before {
            animation: animate 1s linear forwards;
        }
  
        @keyframes animate {
            0% {
                width: 0;
                height: 0;
                border-top-color: black;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
  
            50% {
                width: 100%;
                height: 0;
                border-top-color: black;
                border-right-color: black;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
  
            100% {
                width: 100%;
                height: 100%;
                border-top-color: black;
                border-right-color: black;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
        }
  
        .geeks::after {
            content: "";
            position: absolute;
            top: -2px;
            left: -2px;
            width: 0;
            height: 0;
            background: transparent;
            border: 2px solid transparent;
        }
  
        .geeks:hover::after {
            animation: animates 1s linear forwards;
        }
  
        @keyframes animates {
            0% {
                width: 0;
                height: 0;
                border-top-color: transparent;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: black;
            }
  
            50% {
                width: 0;
                height: 100%;
                border-top-color: transparent;
                border-right-color: transparent;
                border-bottom-color: black;
                border-left-color: black;
            }
  
            100% {
                width: 100%;
                height: 100%;
                border-top-color: transparent;
                border-right-color: transparent;
                border-bottom-color: black;
                border-left-color: black;
            }
        }
    </style>
</head>
  
<body>
    <div class="geeks">
        <h1>GeeksforGeeks</h1>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por sirohimukul1999 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 *