Wie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte)-CSS-Tutorial-php.cn

Wie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte)

藏色散人

Freigeben： 2018-08-06 11:58:51

Original

5171 Leute haben es durchsucht

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:

Wie vergrößert man Bilder mit CSS? (Beispiel für coole Spezialeffekte)

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