Quer deixar o seu site mais interativo e atraente para os visitantes? Um truque simples, mas eficaz, que você pode adicionar ao seu arsenal de design é o efeito de “pulso” que ocorre quando o mouse passa sobre um elemento. Este efeito sutil pode dar vida ao seu site e chamar a atenção para informações importantes. Neste artigo, vamos mostrar como adicionar esse efeito usando HTML e CSS.
Passo 1: Entenda a estrutura
O primeiro passo é criar a estrutura HTML para o elemento que você deseja animar. Aqui, usaremos um exemplo com um elemento dentro de um contêiner. Veja o código HTML abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Efeito de Pulsar</title>
</head>
<body>
<div class="pulsar">Passe o mouse aqui</div>
</body>
</html>
Passo 2: Adicionando Estilos com CSS
Agora, vamos criar os estilos CSS para o nosso elemento e o efeito de “pulso”. Você pode fazer isso em um arquivo separado, como “styles.css”. Aqui está o código CSS:
.pulsar {
transition: transform 0.5s;
}
/* Efeito de pulsação */
.pulsar:hover {
animation: pulso 1s infinite;
}
@keyframes pulso {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
Neste CSS, definimos o contêiner para centralizar seu conteúdo verticalmente e horizontalmente, e o elemento dentro do contêiner recebe um efeito de “pulso” quando o mouse passa por cima. O transform: scale(1.1);
aumenta o tamanho do elemento em 10% quando o mouse está sobre ele.
Adicionar um efeito de “pulso” a elementos em seu site é uma maneira simples de torná-los mais atraentes e interativos. Este truque é facilmente alcançado com HTML e CSS, e você pode personalizá-lo para atender às suas necessidades de design. Experimente este efeito em seus elementos e veja como ele pode melhorar a experiência do usuário em seu site. Seja criativo e divirta-se personalizando-o de acordo com o estilo do seu site!
Se for usar no Elementor Free, use um bloco de html e insira o código dessa forma.
Lembre de colocar a class “pulsar” no elemento que você deseja. * Se quiser usar como ID, basta mudar o ponto (.) antes de pulsar para #. Ficaria assim: #pulsar
No entanto, ao inserir CLASS ou ID no elemento desejado, você coloca apenas o nome, sem ponto ou sustenido.