Tout d'abord voici la définition que nous propose MDN:
La propriété CSS
filterpermet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures.
Développement:
Pour utiliser la propriété CSS filter, on utilisera none ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra none. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34).
Lorsqu'une seule propriété filter possède deux fonctions (ou plus), le résultat obtenu sera différent de l'application de deux propriétés filter (ou plus) séparées avec chacune une fonction.
Quelques valeur du filter css:
La propriété de Filtre CSS filter permet de spécifier une/des fonctions de Filtre CSS qui correspondront au divers effets à appliquer sur un élément HTML. Exemple de syntaxe CSS filter : filter : contrast(400%); filter : grayscale(0.5) blur(10px); filter : sepia(20%) opacity(10%) drop-shadow(20px 20px 20px #000);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>points anim</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contenaire">
<span class="dot"></span>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
.contenaire{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 142px;
height: 40px;
background-color:beige;
filter:contrast(20);
}
.contenaire .dot{
position: absolute;
width: 16px;
height: 16px;
top: 12px;
left: 15px;
filter: blur(4px);
background: black;
border-radius: 50%;
animation: point 2.8s infinite;
}
.contenaire .dots span{
display: block;
float: left;
width: 16px;
height: 16px;
margin-left: 16px;
filter: blur(4px);
background: black;
border-radius: 50%;
}
.contenaire .dots{
margin-top: 12px;
margin-left: 31px;
animation: points 2.8s infinite;
}
@keyframes point{
50%{
transform: translateX(96px);
}
}
@keyframes point{
50%{
transform: translateX(-31px);
}
}
Top comments (0)