简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

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:515160Durchsuche

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:

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!

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

In Verbindung stehende Artikel

Mehr sehen