Efeito de Pulsar ao passar o mouse sobre elemento

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!