Maison > Article > programmation quotidienne > Comment obtenir l'effet d'agrandissement lent des images au survol de la souris en CSS3 (image, texte + vidéo) ?
Comment obtenir l'effet d'agrandissement lent des images au survol de la souris en CSS3 (image, texte + vidéo) ?
- 藏色散人original
- 2018-10-12 13:44:3413956parcourir
Cet article vous présente principalement la méthode spécifique pour obtenir l'effet de grossissement lorsque la souris glisse sur l'image.
Lorsque nous parcourons les principaux sites Web de commerce électronique, l'effet dynamique le plus courant des images devrait être l'effet d'agrandissement lorsque la souris se déplace dans l'image ou survole l'image. L’objectif principal de ces effets dynamiques est de mettre en valeur le contenu du produit et d’améliorer l’expérience utilisateur.
Pour les novices en code, cet effet est certes très attractif, mais si vous souhaitez y parvenir grâce au code html/css, vous ne savez peut-être pas par où commencer.
En fait, l'implémentation du code est très simple. Ci-dessous, nous utiliserons un exemple simple pour vous présenter la méthode d'agrandissement de l'image lorsque la souris passe dessus.
L'exemple de code html/css de l'effet d'agrandissement de l'image lorsque la souris est déplacée est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html/Css3实现图片缩放</title>
<style type="text/css">
#div1{
width: 500px;
margin: 150px auto;
}
#div1 img{
transition: all 0.5s;
border-radius:5px;
border: #eee solid 2px;
}
#div1 img:hover{
transform: scale(1.5);
}
</style>
</head>
<body style="background: #000">
<div id="div1">
<img src="123123.png" / alt="Comment obtenir l'effet d'agrandissement lent des images au survol de la souris en CSS3 (image, texte + vidéo) ?" >
</div>
</body>
</html>Visitez d'abord la réception, et l'image l'effet est le suivant :
Ensuite, lorsque nous passons la souris sur l'image, l'effet est le suivant :
D'après la photo, il est évident que l'image a été agrandie.
Vous pouvez copier ce code directement et le tester localement Certaines des principales propriétés CSS/CSS3 utilisées ici sont :
border-radius : to div. Ajoutez une bordure arrondie à l'élément. Le sélecteur
:hover est utilisé pour sélectionner l'élément sur lequel flotte le pointeur de la souris.
transformation : Applique une transformation 2D ou 3D à l'élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément. où, l'échelle de valeurs (x, y) Définissez la transformation de mise à l’échelle 2D. (Cet exemple définit le zoom de l'image à 1,5 fois)
transition : un attribut raccourci utilisé pour définir quatre attributs de transition. (Cet exemple définit le temps de transition lorsque l'image est agrandie à 0,5 seconde pour éviter que l'effet ne soit trop brusque)
Cet article concerne l'utilisation de html/css/css3 pour obtenir l'effet d'agrandissement de l'image lorsque la souris passe dessus. Très simple et facile à comprendre, j'espère que cela sera utile à des amis dans le besoin !
Si vous souhaitez en savoir plus sur HTML/css, vous pouvez suivre le site PHP chinois Tutoriel vidéo HTML et Tutoriel vidéo CSS, Tutoriel vidéo CSS3 , invitez tout le monde à se référer et à étudier !
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!