Heim >Web-Frontend >CSS-Tutorial >Es ist nicht erforderlich, dass JS und jQuery CSS3-Mouse-Floating implementieren, um das Bild zu vergrößern
Es ist nicht erforderlich, dass JS und jQuery CSS3-Mouse-Floating implementieren, um das Bild zu vergrößern
- 高洛峰Original
- 2017-03-01 15:21:441395Durchsuche
In diesem Artikel wird ein Teil des CSS3-Codes mitgeteilt, um den Effekt des Schwebens und Vergrößerns von Bildern zu erzielen. Der Code ist sehr gut und hat einen Referenzwert siehe
Kein JS- und jQuery-Code erforderlich, um CSS3-Mausbewegungen und -vergrößerungen von Bildern 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>
Das Obige ist was Der Editor stellt Ihnen vor, wie Sie das Verschieben und Vergrößern von Bildern mit CSS3 ohne JS- und jQuery-Code realisieren können. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!
Weitere verwandte Artikel zum Realisieren von CSS3-Mouse-Floating und zum Vergrößern von Bildern ohne JS und jQuery finden Sie auf der chinesischen PHP-Website!