Heim > Artikel > Web-Frontend > Verwenden Sie CSS3, um Spezialeffekte für Fotowände zu erstellen

Verwenden Sie CSS3, um Spezialeffekte für Fotowände zu erstellen

不言Original: 2018-06-11 09:25:342813Durchsuche

Dieser Artikel stellt hauptsächlich die spezifischen Schritte zum Erstellen einer schönen Fotowand mit CSS3 im Detail vor. Er hat einen gewissen Referenzwert.

Das Beispiel in diesem Artikel soll mit Ihnen geteilt werden die Verwendung von CSS3 Die detaillierten Schritte zum Erstellen einer animierten Fotowand dienen als Referenz. Der spezifische Inhalt ist wie folgt:

Der erste Effekt:

Der HTML-Code ist wie folgt:

<body>
<h2>照片墙制作</h2>
<p class="container">
<img class="img1" src="img/img (1).jpg" height="150" width="150" alt="">
<img class="img2" src="img/img (2).jpg" height="160" width="200" alt="">
<img class="img3" src="img/img (3).jpg" height="170" width="200" alt="">
<img class="img4" src="img/img (4).jpg" height="240" width="200" alt="">
<img class="img5" src="img/img (5).jpg" height="300" width="300" alt="">
</p>
</body>

Der CSS-Code lautet wie folgt:

<style>   
* {margin:0; padding:0;}   
body { background-color: #eee; padding-top: 50px;}   
h2 { text-align: center;}   
.container { position: relative; width:1000px; height:700px; margin:0px auto; }   
img { position: absolute; top:50px; left:100px; cursor: pointer;   
padding:10px 10px 25px; background-color: #fff; border:1px solid #ddd;   
transition:0.5s; box-shadow: 3px 3px 3px #ccc;   
}   
.img1 { left:40px; top:20px; transform:rotate(30deg); z-index: 1;}   
.img2 { left:156px; top:156px; transform:rotate(-30deg); z-index: 1;}   
.img3 { left:381px; top:60px; transform:rotate(30deg); z-index: 1;}   
.img4 { left:458px; top:256px; transform:rotate(30deg); z-index: 1;}   
.img5 { left:684px; top:110px; transform:rotate(-40deg); z-index: 1;}   
img:hover { transform:rotate(0deg); transform:scale(1.5); box-shadow: 6px 6px 6px #656565; z-index: 2;}   
</style>

Effektbild:

Der zweite Implementierungseffekt:

Teil Eins: HTML

Hier haben wir zunächst zehn Bilder auf die Seite gestellt. (Wenn Sie schöne Fotos haben, posten Sie sie bitte!)

<p class="content">  
    <img class="pic1" src="img/1.jpg" />  
    <img class="pic2" src="img/2.jpg" />  
    <img class="pic3" src="img/3.jpg" />  
    <img class="pic4" src="img/4.jpg" />  
    <img class="pic5" src="img/5.jpg" />  
    <img class="pic6" src="img/6.jpg" />  
    <img class="pic7" src="img/7.jpg" />  
    <img class="pic8" src="img/8.jpg" />  
    <img class="pic9" src="img/9.jpg" />  
    <img class="pic10" src="img/10.jpg" />  
 </p>

Teil 2: CSS3

Dieser Teil steht im Mittelpunkt unseres Abschnitts , Wie im Bild oben gezeigt, werden wir auf jeden Fall die Wissenspunkte von CSS3 verwenden:

CSS3-Rotation
CSS3-Skalierungsskala
CSS3-Schattenbox - Schatten

Ja, mit diesen Funktionen können wir eine schöne Fotowand erstellen. Werfen wir einen Blick auf unseren Code. Hier wird nur ein Teil des Codes gezeigt.

body{   
    background: url(../img/bg1.jpg) no-repeat top center fixed;   
    background-size: 100% auto;   
}   
.content{   
    width: 900px;    
    height: 1000px;   
    overflow: hidden;    
    margin: 100px auto;    
    position: relative;   
}   
img{    
    z-index: 1;   
    width: 20%;   
    height: auto;   
    position: absolute;   
    padding: 10px 10px 15px 10px;   
    background: #ffffff;   
    border: 1px solid #CCCCCC;   
    /* 动画的时间 */  
    -moz-transition: 0.5s;   
    -webkit-transition: 0.5s;   
    transition: 0.5s;   
 }   
img:hover{   
    z-index: 2;   
    transform: scale(1.5);   
    -moz-transform: scale(1.5) ;   
    -webkit-transform: scale(1.5) ;   
    box-shadow: -10px 10px 20px #000000;   
    -moz-box-shadow: -10px 10px 20px #000000;   
    -webkit-box-shadow: -10px 10px 20px #000000;   
}   
.pic1{   
    left: 100px;   
    top: 50px;   
    -webkit-transform: rotate(20deg);   
    -moz-transform: rotate(20deg);   
    transform: rotate(20deg);   
}   
.pic2{   
    left: 280px;   
    top: 60px;   
    -webkit-transform: rotate(-10deg);   
    -moz-transform: rotate(-10deg);   
    transform: rotate(-10deg);   
}   
/*   下面的代码大同小异就不依依展示了    */

Ein so einfacher Code kann den im Bild oben gezeigten Effekt erzielen. Wenn Sie interessiert sind, können Sie es selbst ausprobieren und Ihre schönen Fotos zur Ansicht veröffentlichen.

PS: CSS3 kann auch noch weitere wundervolle und wunderschöne Effekte erzeugen. Wenn Sie interessiert sind, können Sie es ausführlich studieren!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So implementieren Sie einzeilige und mehrzeilige Textüberlauf-Anzeigeellipsen in CSS

Anleitung um CSS-Symbole zu implementieren. Am Text ausrichten

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um Spezialeffekte für Fotowände zu erstellen. 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：CSS-Implementierungsmethode zur Realisierung eines einzeiligen und mehrzeiligen Textüberlaufs und zur Anzeige von EllipsenNächster Artikel：CSS-Implementierungsmethode zur Realisierung eines einzeiligen und mehrzeiligen Textüberlaufs und zur Anzeige von Ellipsen

In Verbindung stehende Artikel

Mehr sehen