Astuces et méthodes pour utiliser CSS pour obtenir des effets de flou au survol de la souris

Conseils et méthodes pour utiliser CSS pour obtenir des effets de flou au survol de la souris

Dans la conception Web moderne, les effets dynamiques sont cruciaux pour attirer l'attention des utilisateurs et améliorer leur expérience. Les effets de survol de la souris sont l'un des effets interactifs courants qui peuvent rendre un site Web plus vivant et plus accrocheur. Cet article explique comment utiliser CSS pour obtenir des effets de flou lorsque la souris survole et donne des exemples de code spécifiques.

1. Utilisez l'attribut filtre CSS pour définir l'effet de flou

En CSS3, nous pouvons utiliser l'attribut filtre pour obtenir divers effets spéciaux d'image, y compris des effets de flou. Tout d’abord, nous devons définir une classe CSS pour décrire les effets spéciaux lorsque la souris survole. Par exemple, nous pouvons définir une classe nommée "blur-effect":

.blur-effect {
filter: blur(5px);
}

Dans le code ci-dessus, l'attribut filter est défini sur blur(5px), c'est-à-dire que l'image est floue de 5 pixels. Vous pouvez ajuster le degré de flou selon vos besoins, par exemple en augmentant le rayon de flou.

2. Définir l'animation de l'effet de survol

En CSS, nous pouvons utiliser la bibliothèque d'animation CSS pour définir des effets d'animation spécifiques. Pour les effets de survol de la souris, nous pouvons utiliser les pseudo-classes CSS:hover et les attributs de transition pour obtenir des effets d'animation.

Tout d'abord, nous devons appliquer l'effet de flou à l'élément survolé par la souris. En prenant des photos comme exemple, nous pouvons appliquer la classe .blur-effect ci-dessus à la classe CSS de l'image :

.img-container {
transition : filtre 0,5 s facilité ;
}

.img-container:hover {
filter: blur(5px);
}

Dans le code ci-dessus, nous définissons l'attribut de transition pour filtrer une facilité de 0,5 s, ce qui signifie que la durée de l'effet de transition est de 0,5 seconde et que l'effet de transition est fluide. Lorsque la souris survole, l'attribut filter est défini sur blur(5px) via la pseudo-classe :hover, c'est-à-dire que l'image est floue de 5 pixels.

3. Définir l'effet de récupération

Afin de rendre l'effet spécial plus doux et plus naturel, nous pouvons définir un effet de récupération pour l'effet spécial, c'est-à-dire que lorsque la souris part, l'effet spécial disparaît progressivement.

Nous pouvons utiliser la propriété inverse de l'effet de transition pour obtenir cet effet. Ajoutez le code suivant à la classe .img-container ci-dessus :

.img-container {
transition : filtre 0,5 seconde facilité ;
}

.img-container:hover {
filtre : flou (5px);
}

.img-container:hover:not(:hover) {
transition: filter 0.5s easy;
filter: blur(0px);
}

Dans le code ci-dessus, nous définissons le survol de la souris via le pseudo- :hover classe Effets spéciaux Stop-time. Utilisez ensuite le sélecteur :not(:hover) pour définir l'effet spécial lorsque la souris quitte, et définissez l'attribut de filtre sur flou(0px), ce qui annule l'effet de flou.

Pour résumer, nous pouvons utiliser la propriété de filtre et l'effet d'animation de CSS pour obtenir l'effet de flou lorsque la souris survole. En définissant des classes CSS spécifiques et en implémentant des effets de transition via des pseudo-classes :hover et des attributs de transition, les effets spéciaux peuvent être rendus plus fluides et plus naturels. Ce qui suit est un exemple de code complet :

Code HTML :

<div class="img-container">
  <img src="example.jpg" alt="example image">
</div>

Code CSS :

.blur-effect {
  filter: blur(5px);
}

.img-container {
  transition: filter 0.5s ease;
}

.img-container:hover {
  filter: blur(5px);
}

.img-container:hover:not(:hover) {
  transition: filter 0.5s ease;
  filter: blur(0px);
}

Avec l'exemple de code ci-dessus, nous pouvons implémenter l'effet de flou lorsque la souris survole la page Web. Lorsque l'utilisateur survole l'image, l'image devient progressivement floue ; lorsque la souris quitte l'image, elle revient progressivement à son état d'origine, apportant une expérience fluide et naturelle.

Résumé :

En utilisant les propriétés du filtre CSS et les effets d'animation, nous pouvons facilement obtenir des effets de flou lorsque la souris survole. En définissant des classes CSS spécifiques et en combinant la pseudo-classe :hover et les attributs de transition, nous pouvons contrôler l'affichage et la disparition des effets spéciaux et améliorer l'expérience utilisateur. Dans les applications pratiques, le degré d'effet de flou et la durée de l'effet de transition peuvent être ajustés de manière flexible en fonction des besoins, rendant les effets spéciaux plus remarquables et plus attrayants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!