Heim > Artikel > Web-Frontend > Wie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte)
Wie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte)
- 藏色散人Original
- 2018-08-06 11:58:515174Durchsuche
In diesem Artikel wird hauptsächlich die Verwendung von CSS zum Realisieren der Bildvergrößerungsfunktion vorgestellt, d Effekte können Nutzer dazu verleiten, auf Produktbilder zu klicken. Ich hoffe, dieser Artikel ist für alle hilfreich.
Der spezifische Code für CSS zum Implementieren der Bildvergrößerung lautet wie folgt:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS图片放大特效示例</title>
<script src="js/mootools-1.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/img-hover.css" type="text/css">
<link rel="stylesheet" href="js/img-hover-main.css" type="text/css">
<script src="js/browserCheck.js" type="text/javascript"></script>
</head><body>
<div id="logo"></div>
<div id="container">
<div class="heading">CSS图片放大特效示例</div>
<div id="image-container">
<div class="img" id="img-1">
<div class="mask"></div>
<img src="img/1.png" alt="Wie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte)" >
</div>
<div class="img" id="img-2">
<div class="mask"></div>
<img src="img/1.png" alt="Wie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte)" >
</div>
<div class="img" id="img-3">
<div class="mask" id="mask-1"></div>
<div class="mask" id="mask-2"></div>
<img src="img/1.png" alt="Wie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte)" >
</div>
<div class="img" id="img-4">
<div class="mask"></div>
<img src="img/1.png" alt="Wie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte)" >
</div>
<div class="img" id="img-5">
<div class="mask"></div>
<img src="img/1.png" alt="Wie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte)" >
</div>
<div class="img" id="img-6">
<div class="mask"></div>
<img src="img/1.png" alt="Wie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte)" >
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<br>
<div id="warning" style="margin-top: 20px; text-align: center;"></div>
</div>
</body>
</html>/*img-hover.css*/
.img{
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
float:left;
margin-left:-50px;
margin-right:-50px;
margin-top:-10px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.img img{
padding:10px;
border:1px solid #fff;
}
.img:hover{
-webkit-transform:scale(0.8);
-webkit-box-shadow:0px 0px 30px #ccc;
-moz-transform:scale(0.8);
-moz-box-shadow:0px 0px 30px #ccc;
-o-transform:scale(0.8);
-o-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
width: 100%;
background-color: rgb(0, 0, 0);
position: absolute;
height: 100%;
opacity:0.6;
cursor:pointer;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
}
#img-1:hover .mask{
height:0%;
}
#img-2:hover .mask{
height:0%;
margin-top:130px;
}
#img-4:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
}
#img-3 #mask-1 {
width:50%;
}
#img-3 #mask-2{
width:50%;
margin-left:211px;
}
#img-3:hover #mask-1{
width:0%;
}
#img-3:hover #mask-2{
margin-left:430px;
width:0%;
}
#img-5:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateX(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(-360deg);
}
#img-6:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateZ(750deg);
-moz-transform: rotateZ(750deg);
-o-transform: rotat(750deg);
}/*img-hover-main.css*/
html{
height:100%;
margin:0;
padding:0;
width:100%;
background-color:#242424;
font-family:arial;
}
body{
height:100%;
margin:0 auto;
padding:0;
width:980px;
}
#logo {
background-color:#242424;
color:#F1F1F1;
font-size:43px;
padding:15px 0 6px;
text-shadow:0 0 2px #FFFFFF;
}
#logo a {
color:#F1F1F1;
}
#container{
width:100%;
min-height:800px;
background-color:#000;
}
a{
color: rgb(0, 114, 191); text-decoration: none;
}
.heading{
font-size:24px;
color:#dfdfdf;
text-align:center;
padding-top:20px;
}
.legal{
text-align:center;
color:5f5f5f;
font-size:16px;
margin-top:100px;
background:-moz-linear-gradient(center top , #000, #242424) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #242424));
background:-o-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #242424));
}
a{
color: rgb(0, 114, 191); text-decoration: none;
}
.warning{
color:#555;
text-align:center;
font-size:12px;
}
.msg{
color:#dfdfdf;
text-align:center;
font-size:14px;
line-height:1.5em;
}
.clearfix{
clear:both;
float:none;
}Das CSS für die Bildvergrößerung wird wie gezeigt auf der Seite angezeigt unten:
【Empfohlene verwandte Artikel】
Teilen Sie einen HTML+CSS-Bildvergrößerungseffektcode
Bildlupeneffekt implementiert durch CSS3
CSS3 implementiert fünf Punkte Bildlupe
JQuery-Implementierung der Bildvergrößerungs-Klick-Umschaltfunktion, Beispielfreigabe
CSS3-Mausdrehung und Vergrößerungseffekt nach der Bilddrehung
Das obige ist der detaillierte Inhalt vonWie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte). 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：Drei Hauptmerkmale von CSS und eine Einführung in die Einstellung der HintergrundtransparenzNächster Artikel：Drei Hauptmerkmale von CSS und eine Einführung in die Einstellung der Hintergrundtransparenz