Heim > Artikel > Web-Frontend > Verwenden Sie CSS3, um das Mouse-Floating zum Vergrößern von Bildern zu implementieren

Verwenden Sie CSS3, um das Mouse-Floating zum Vergrößern von Bildern zu implementieren

php中世界最好的语言Original: 2018-03-22 16:31:222020Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zur Verwendung von CSS3 zur Implementierung der schwebenden Mausvergrößerung von Bildern vorstellen. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Kein JS- und jQuery-Code erforderlich, um CSS3-Maus-Floating und -Vergrößerungsbilder zu implementieren

<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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Zusammenfassung häufig verwendeter Farbverlaufsmethoden

2D-Simulation zur Realisierung von Spezialeffekten für Riesenrad-Rotationsanimationen

So gehen Sie mit dem nth-child()-Kompatibilitätsproblem unter IE8 um

So entfernen Sie den unscharfen weißen Rand von CSS3

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um das Mouse-Floating zum Vergrößern von Bildern zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Fügen Sie dem Text einen Wellenlinieneffekt hinzuNächster Artikel：Fügen Sie dem Text einen Wellenlinieneffekt hinzu

In Verbindung stehende Artikel

Mehr sehen