post

Efeito de Objeto Flutuando Suave com CSS

Publicado em: 27/03/2024 / Atualizado em: 27/03/2024

Categorias: BlogCSS

Para criar um efeito de flutuação infinita suave usando CSS, você pode usar @keyframes para definir uma animação que alterna entre diferentes valores de translate para mover o elemento verticalmente de maneira suave. A seguir, um exemplo de código CSS que cria este efeito:

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.elemento-flutuante {
    animation: float 3s ease-in-out infinite;
}

Este código define uma animação chamada float que dura 3 segundos (3s) e se repete infinitamente (infinite). A animação tem um movimento suave (ease-in-out) e alterna a posição do elemento (translateY) entre 0 e -20 pixels em relação à sua posição original. O efeito é que o elemento parece flutuar suavemente para cima e para baixo.

Para aplicar esta animação a um elemento, adicione a classe .elemento-flutuante ao elemento HTML que você deseja animar. Por exemplo:

<div class="elemento-flutuante">Flutuo infinitamente!</div>

Esse exemplo simples pode ser personalizado conforme necessário, ajustando a duração da animação, a distância de flutuação (translateY) e a curva de velocidade (ease-in-out) para atender às suas necessidades específicas.

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/4815

ID de Referência: 4815

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários