1

É possível apenas com css fazer uma imagem ficar pulsando e passando um efeito com brilho?

3
  • Sim é claro que é possível...
    – hugocsl
    Commented 26/01/2018 às 17:38
  • Tem como colocar um exemplo de como seria o efeito de brilho? Commented 26/01/2018 às 18:12
  • Você já tentou fazer alguma coisa? Poste o que conseguiu até aqui. Commented 26/01/2018 às 20:00

1 Resposta 1

3

Modificando um pouco o exemplo do miguel é possível obter o seguinte resultado...

.pulse {
  animation: pulse 0.7s infinite;
  margin: 0 auto;
  display: table;
  margin-top: 50px;
  animation-direction: alternate;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -webkit-filter: brightness(100%);
  }
  100% {
    -webkit-transform: scale(1.1);
    -webkit-filter: brightness(200%);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    filter: brightness(100%);
  }
  100% {
    transform: scale(1.1);
    filter: brightness(200%);
  }
}
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQORaH2BF3ZzUy2ATj866BszLShnoe2cRbjc-WQauazk5iThjC-4w" class="pulse">

Infelizmente o suporte para filtros ainda é baixo para os navegadores, caso seu alvo seja IE, não recomendo usar.

2
  • 1
    Bom trabalho Felipe
    – Miguel
    Commented 26/01/2018 às 18:39
  • Em adição ao "infelizmente o suporte para filtros ainda é baixo", veja Can I use? Commented 16/04/2020 às 0:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .