Pas besoin de JS et jQuery pour implémenter le flottement de la souris CSS3 pour agrandir l'image-tutoriel CSS-php.cn

Pas besoin de JS et jQuery pour implémenter le flottement de la souris CSS3 pour agrandir l'image

高洛峰

Libérer： 2017-03-01 15:21:44

original

1368 Les gens l'ont consulté

Cet article partagera avec vous un morceau de code CSS3 pour obtenir l'effet de flottement de la souris et d'agrandissement des images. Il n'y a pas besoin de code js et jquery dans le code. Il est très bon et a une valeur de référence. référez-vous à lui

Pas besoin de JS et de jQuery Code pour implémenter le flottement de la souris CSS3 et l'agrandissement des images

<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

Ce qui précède est ce qui précède. l'éditeur vous présente la réalisation d'images flottantes et agrandies de souris CSS3 sans code JS et jQuery. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message et je vous répondrai à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles sur la réalisation d'images flottantes et agrandies de souris CSS3 sans JS et jQuery, veuillez faire attention au site Web PHP chinois !