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)
}
}