Como instalar o EFEITO PULSE (pulsar) em um elemento

Para instalar o efeito de pulsar em algum elemento de sua página, siga este passo a passo abaixo:

Acesse o seu editor de páginas;

Clique no ícone de engrenagem localizado no canto superior direito da sua tela;

Em seguida, selecione a opção Javascript/Css;

Clique em Adicionar código;

Dê um nome ao código, classifique-o como funcionamento e instale o código abaixo:

<style>

  #e0000000 .c {
    
    --pulsar: 0 0 0 0 #7fff00;
    animation: pulsar 3s infinite;
    -webkit-animation: pulsar 3s infinite;
    -moz-animation: pulsar 3s infinite;
    -o-animation: pulsar 3s infinite;
  }

   @-webkit-keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @-o-keyframes pulse {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @-ms-keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @-moz-keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

</style>

Em seguida, você vai precisar identificar o **ID do elemento **em que o efeito será aplicado;

Caso você não saiba como identificar o ID de um elemento no GreatPages, clique aqui e veja nosso tutorial.

Depois disso, informe no campo destacado abaixo o código da cor que gostaria de aplicar com o efeito de pulsar ;

Caso não saiba como identificar o código de uma determinada cor, clique aqui e veja um site que te ajuda neste passo.

Por fim, clique em "Salvar".

Ficou com alguma dúvida? Chame nossa equipe no Chat! Estamos sempre prontos para ajudar.

Atualizado em: 22/05/2025

Este artigo foi útil?

Obrigado!