Quer adicionar um toque de dinamismo e atratividade ao seu site? Um efeito pulsar infinito pode ser uma escolha elegante e sutil. Neste guia, vamos mostrar como criar esse efeito facilmente com CSS. Vamos começar!
Passo 1: Estrutura HTML
Primeiro, você precisa criar a estrutura HTML para o elemento que deseja que pulse infinitamente. Neste exemplo, usaremos um div, mas você pode aplicar o efeito a qualquer elemento HTML. Aqui está o código HTML básico:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Meu Efeito Pulsar</title>
</head>
<body>
<div class="pulsar-element">
Seu conteúdo aqui
</div>
</body>
</html>
Passo 2: Estilizando com CSS
Agora, vamos criar a animação CSS chamada “pulsar” que dará vida ao nosso efeito. Abra um arquivo CSS (neste caso, styles.css) e adicione o seguinte código:
@keyframes pulsar {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.pulsar-element {
animation: pulsar 1.5s infinite;
}
Este código define a animação “pulsar” usando @keyframes. A animação faz com que o elemento pulse em tamanho e opacidade. A classe .pulsar-element é atribuída ao elemento que você deseja animar.
Passo 3: Resultado
Agora, ao visualizar seu HTML no navegador, você verá o elemento com o efeito pulsar infinito.
Deixe um comentário