É possível apenas com css fazer uma imagem ficar pulsando e passando um efeito com brilho?
-
Sim é claro que é possível...– hugocslCommented 26/01/2018 às 17:38
-
Tem como colocar um exemplo de como seria o efeito de brilho?– Renan GomesCommented 26/01/2018 às 18:12
-
Você já tentou fazer alguma coisa? Poste o que conseguiu até aqui.– Roberto de CamposCommented 26/01/2018 às 20:00
Adicione um comentário
|
1 Resposta
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.
-
1
-
Em adição ao "infelizmente o suporte para filtros ainda é baixo", veja Can I use? Commented 16/04/2020 às 0:06