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>Nach dem Login kopieren
/*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);
}Nach dem Login kopieren
/*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;
}Nach dem Login kopieren
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!
