Animação Simples Utilizando Apenas HTML e CSS

Neste artigo você vai aprender a criar uma animação simples utilizando apenas HTML e CSS.

Aparentemente parece algo complicado mas você vai ver que é bem simples de entender como o código funciona.

Resultado Final

Assista o vídeo abaixo visualizar o resultado final do código HTML e CSS que vamos mostrar neste artigo:

Entendendo o Código

Primeiramente, para facilitar o entendimento do código vamos dividi-lo em algumas partes.

Dessa forma, você conseguirá entender me maneira mais simples.

Código HTML

Primeiramente, temos o nosso código HTML que basicamente possui duas tags div com a propriedade class para diferencia-las e três tags spam:

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

Aqui basicamente construímos os elementos básicos que serão utilizados pelo CSS para realizar a animação. Sem muito segrego até aqui.

Clique Aqui para participar do nosso canal do Telegram e receber ainda mais conteúdos GRATUITOS de programação.

Código CSS

Em seguida, vamos definir as propriedades de alguns elementos da nossa página como a tag body e a tag div que foi definida com a classe main.

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: black;
}
.main{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Em seguida, vamos definir as propriedades das tags spam que inserimos em nosso código HTML:

.box{
    width: 30px;
    height: 30px;
    border-radius: 50%
    background: #6495ed;
    position: relative;
}
.box span{
    position: absolute;
    top: -100%;
    left: -105%;
    width: 800%;
    height: 80px;
    border: 4px solid #6495ed;
    border-radius: 50%;
    animation: anim 4s infinite;
}
.box span:nth-child(1){
    transform: rotate(-60deg);
    animation: anim2 4s infinite;
}
.box span:nth-child(2){
    transform: rotate(60deg);
    animation: anim3 4s infinite;
}

Por fim, vamos criar as animações utilizando os keyframes do CSS.

Ou seja, vamos utilizar o comando rotate() para animar os elementos de forma que eles façam o movimento de giro.

@keyframes anim{
    0%,100%{transform: rotate(0deg);}
    50%{transform: rotate(360deg);}
}
@keyframes anim2{
    0%,100%{transform: rotate(-60deg);}
    50%{transform: rotate(-300deg);}
}
@keyframes anim3{
    0%,100%{transform: rotate(60deg);}
    50%{transform: rotate(300deg);}
}

Conclusão: Animação Simples

Em conclusão, chegamos ao fim de mais um artigo e nele vimos como criar uma animação simples utilizando HTML e CSS.

Atualmente as empresas buscam profissionais que saibam criar esse tipo de animação.

Portanto, para que você se destaque no mercado é importante ter esse tipo de habilidade.

Lembrando que se você sentiu alguma dificuldade em entender o código, é muito provável que precise estudar mais o Front-End.

Não perca tempo! Dê um passo decisivo em direção ao seu sucesso profissional agora mesmo. Basta clicar no botão abaixo e abrir as portas para mais de 1400 cursos completos, todos com certificados válidos.

ACESSAR CURSOS COM CERTIFICADO

Enfim, espero que o conteúdo tenha te ajudado de alguma forma.

Tags: animação css | front end | projeto front end