Animação de onda com CSS

Fala dev, bem-vindo(a) à nossa aula especial de hoje! Hoje, mergulharemos no fascinante mundo da criação de um efeito impressionante usando HTML e CSS. Prepare-se para explorar técnicas empolgantes que transformarão seus projetos web, adicionando um toque interativo e visualmente atraente.

Vamos analisar o código CSS e HTML fornecido, explicando cada parte:

<div class="card controle">
    <div class="image">
        <img src="img/icon.png">
    </div>
    <div class="onda"></div>
    <div class="onda"></div>
    <div class="onda"></div>
    <div class="site">www.codekong.com.br</div>  
</div>

Estrutura HTML:

• Um contêiner com a classe “card controle”.
• Dentro desse contêiner, há:
  • Uma div com a classe “image”, contendo uma imagem.
  • Três divs com a classe “onda”.
  • Uma div com a classe “site” que contém o texto “www.codekong.com.br“.

.card {
    margin: 100px auto;
    background: transparent;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);
    position: relative;
    width: 240px;
    height: 330px;
    border-radius: 16px;
    overflow: hidden;
}

Estilo do contêiner “card”:

• Margem de 100px superior/inferior e centralizado horizontalmente.
• Fundo transparente.
• Sombra box-shadow para dar profundidade.
• Posição relativa.
• Largura e altura fixas.
• Bordas arredondadas.
• Overflow oculto para esconder o conteúdo além das dimensões do contêiner.

.image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 330px;
}

Estilo da classe “image”:

• Estilo de contêiner flexível para centralizar vertical e horizontalmente o conteúdo (a imagem).
• Altura fixa.

.image img {
    z-index: 9;
    display: flex;
}

Estilo da imagem dentro da classe “image”:

• Z-index para definir a sobreposição.
• Exibição flexível.

.onda {
    position: absolute;
    width: 540px;
    height: 700px;
    opacity: 0.6;
    left: 0;
    top: 0;
    margin-left: -50%;
    margin-top: -70%;
    background: linear-gradient(744deg,#3a87eb,#3f89eb 60%,#177cf0);
}

Estilo da classe “onda”:

• Posição absoluta para permitir o posicionamento em relação ao contêiner pai.
• Dimensões (largura e altura) fixas.
• Opacidade de 0.6.
• Linear-gradient como fundo para criar um efeito de onda.

.site {
    font-size: 14px;
    font-weight: 100;
    position: relative;
    top: -95px;
    text-transform: lowercase;
    text-align: center;
    color: white;
    font-family: sans-serif;
}

Estilo da classe “site”:

• Tamanho de fonte, peso e outras propriedades de texto.
• Deslocamento para cima (-95px) para ajustar a posição vertical.
• Transformação de texto em minúsculas.
• Alinhamento central.
• Cor de texto branca.
• Fonte sans-serif.

.onda:nth-child(2),
.onda:nth-child(3) {
    top: 210px;
}

As ondas de segunda e terceira posição têm uma alteração na propriedade top para posicioná-las mais abaixo no contêiner.

.controle .onda {
    border-radius: 40%;
    animation: onda 3000ms infinite linear;
}

As ondas dentro do contêiner com a classe “controle” têm um estilo específico, com borda arredondada e uma animação chamada “onda” aplicada. A animação tem uma duração de 3000ms (3 segundos), é infinita e linear.

.onda {
    border-radius: 40%;
    animation: onda 55s infinite linear;
}

As ondas padrão (fora do contêiner “controle”) têm uma animação com uma duração de 55 segundos.

.controle .onda:nth-child(2) {
    animation-duration: 4000ms;
}

.onda:nth-child(2) {
    animation-duration: 50s;
}

A segunda onda dentro do contêiner “controle” e fora dele tem durações de animação diferentes especificadas.

.controle .onda:nth-child(3) {
    animation-duration: 5000ms;
}

.onda:nth-child(3) {
    animation-duration: 45s;
}

O mesmo princípio é aplicado à terceira onda.

@keyframes onda {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

A animação keyframe chamada “onda” é definida. A onda gira de 0 a 360 graus durante a animação e pronto, o card com a animação de ondas está pronto e funcionando.

Muito obrigado por ter se juntado a mim nesta jornada criativa! Espero que tenha desfrutado da aula e que tenha adquirido valiosas habilidades na criação de cartões animados com HTML e CSS.

Populares

Mais Acessados

Efeito 3D Interativo com CSS

Criando um Card Interativo com HTML e CSS

Animação de Borda usando CSS