Como criar bordas animadas no estilo Snake com CSS

Neste tutorial você vai aprender como criar um efeito com bordas animadas com HTML e CSS. Este efeito é muito interesante e é um ótimo efeito para utilizar como loader. Vamos lá?

Para criar este efeito, vamos definir no HTML apenas uma box que será usada como card do efeito:

<div class="box"></div>

O segredo para fazer este tipo de efeito é criar duas caixas, uma atrás da outra. Enquanto uma caixa gira a outro realiza o corte frontal. Tambem podemos criar uma caixa que envolverá as outras duas para criar o corte externo do efeito utilizando a pripriedade CSS "overflow: hidden".

Para deixar mais simples, a caixa externa será a "box" que já criamos e utlizaremos os pseudo-elementos "before" e "after" para definir as duas caixa internas.

.box {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #000508;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.box::before{
    content: "";
    position: absolute;
    width: 100px;
    height: 200%;
    background: linear-gradient(180deg, #07e2f1, #eb9b05);
    animation: animate 3s linear infinite;
}
.box::after{
    content: "";
    position: absolute;
    background-color: #000508;
    inset: 5px;
    border-radius: inherit;
}

Neste exemplo definimos uma animação "animate" para o pseudo-elemento "before" que servirá para girar o elemento.

A propriedade "inset" no pseudo-elemento "after" é uma abreviação para (top, bottom, left e right) e só funciona quando utilizamos "position: absolute" no elemento.

Por fim, basta definirmos a animação do pseudo-elemento "before".

@keyframes animate {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

Lembre-se que o tutorial em vídeo é sempre mais completo e melhor explico do que este em texto. Assista vídeo para aprender mais.