Utilisez CSS3 pour implémenter le flottement de la souris pour agrandir les images-tutoriel CSS-php.cn

Utilisez CSS3 pour implémenter le flottement de la souris pour agrandir les images

php中世界最好的语言

Libérer： 2018-03-22 16:31:22

original

2058 Les gens l'ont consulté

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>

Copier après la connexion

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!