Efeito flutuante infinito com CSS - Bruno Devx - BR Criativus

post #1443

Efeito flutuante infinito com CSS

Publicado em: 05/02/2022 / Atualizado em: 05/02/2022

Categorias: BlogCSS

Com o código abaixo você consegue deixar um objeto flutuando infinitamente, apenas aplicando a class efeito-flutuante-infinito

@keyframes float{
	0%,100%{
		transform:translatey(0)
	}
	50%{
		transform:translatey(-30px)
	}
}
.efeito-flutuante-infinito {
     animation: float 2s ease-in-out infinite;
}

O código acima foi inspirado na publicação https://www.alanrezende.com.br/como-criar-uma-animacao-flutuante-em-css-e-utilizar-em-imagens-e-botoes-no-elementor/

Veja também: Caso queira apenas que o objeto flutue ao passar o mouse, você pode optar por este outro código: https://bruno.art.br/blog/efeito-flutuante-ao-passar-o-mouse-em-objeto-com-css/

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=1443

ID de Referência: 1443

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