Maison >interface Web >tutoriel CSS >Utilisez CSS3 pour implémenter le flottement de la souris pour agrandir les images
Utilisez CSS3 pour implémenter le flottement de la souris pour agrandir les images
- php中世界最好的语言original
- 2018-03-22 16:31:222059parcourir
Cette fois, je vais vous présenter les précautions sur l'utilisation de CSS3 pour implémenter l'agrandissement flottant des images avec la souris. Voici des cas pratiques.
Pas besoin de code JS et jQuery pour implémenter des images flottantes et agrandies de souris CSS3
<html>
<head>
<title></title>
<style>
.box {
/* 可见视觉区域 */
width: 480px; height: 250px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.size {
width: 1000px; height: 1000px;
position: absolute; left: 50%; top: 50%;
margin: -500px 0 0 -500px;
/* 水平居中 */
text-align: center;
}
.zoom {
/* 缩放的元素 */
width: 480px; height: 250px;
vertical-align: middle;
-webkit-transition: -webkit-transform .2s;
transition: transform .2s;
}
.box:hover .zoom {
/* hover放大 */
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
zoom: 1.05;
}
:root .box:hover .zoom {
zoom: 1;
}
.middle {
/* 垂直居中 */
display: inline-block;
width: 0; height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<h4>左上角定位</h4>
<p class="box">
<img src="dafu.jpg" class="zoom">
</p>
<h4>居中定位</h4>
<p class="box">
<p class="size">
<img src="dafu.jpg" class="zoom"><i class="middle"></i>
</p>
</p>
</body>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web php chinois !
Lecture recommandée :
Résumé des méthodes de dégradé de couleurs couramment utilisées
Simulation 2D pour réaliser des effets spéciaux d'animation de rotation de grande roue
Comment gérer le problème de compatibilité nth-child() sous IE8
Comment supprimer le bord blanc flou de CSS3
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!