Twitter
Partagez cette démonstration : Twitter

Animation avec les filtres CSS

Dernière modification : juin 2022

Animation avec les filtres CSS

Le code :



<div class=demo-filtre>
<div class=fond>
<img src="image.png" alt>
<p>Animation avec les filtres CSS</p>
</div>
</div>




.demo-filtre{

animation:anim 1s linear infinite;
background:radial-gradient(circle,red,yellow);

}

.fond{

display:flex;
flex-direction:column;
align-items:center;
justify-content:center

}
    
.fond img{

filter:drop-shadow(0 0 10px #000);
animation:anim1 1.2s linear infinite;
max-width:20%
}
    
.demo-filtre p{

animation:pulse .5s linear infinite;
font-size:2.5rem;
font-size:3vmax;
color:red

}   
    

@keyframes anim{

to{filter:hue-rotate(360deg)}

}

@keyframes anim1{

to{transform:rotate(1turn)}


}

@keyframes pulse{

0%{

transform:scale(1)

}

30%{

transform:scale(1)

}

40%{

transform:scale(1.08)

}

50%{

transform:scale(1)

}

60%{

transform:scale(1)

}

70%{

transform:scale(1.05)

}

80%{

transform: scale(1)

}

100%{

transform:scale(1)

}

}






Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.

haut page