Teilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3

Dass CSS3 Animationen erstellen kann, ist sicher jedem bekannt, aber haben Sie diese Funktion schon einmal geschickt genutzt, um eine schöne Fotowand zu erstellen?

Heute werden wir die CSS3-Animationsfunktion nutzen, um gemeinsam eine wunderschöne Fotowand zu erstellen!

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 lazy"  src="/static/imghw/default1.png"  data-src="img/1.jpg"    / alt="Teilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3" >
    <img  class="pic2 lazy"  src="/static/imghw/default1.png"  data-src="img/2.jpg"    / alt="Teilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3" >
    <img  class="pic3 lazy"  src="/static/imghw/default1.png"  data-src="img/3.jpg"    / alt="Teilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3" >
    <img  class="pic4 lazy"  src="/static/imghw/default1.png"  data-src="img/4.jpg"    / alt="Teilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3" >
    <img  class="pic5 lazy"  src="/static/imghw/default1.png"  data-src="img/5.jpg"    / alt="Teilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3" >
    <img  class="pic6 lazy"  src="/static/imghw/default1.png"  data-src="img/6.jpg"    / alt="Teilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3" >
    <img  class="pic7 lazy"  src="/static/imghw/default1.png"  data-src="img/7.jpg"    / alt="Teilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3" >
    <img  class="pic8 lazy"  src="/static/imghw/default1.png"  data-src="img/8.jpg"    / alt="Teilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3" >
    <img  class="pic9 lazy"  src="/static/imghw/default1.png"  data-src="img/9.jpg"    / alt="Teilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3" >
    <img  class="pic10 lazy"  src="/static/imghw/default1.png"  data-src="img/10.jpg"    / alt="Teilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3" >
 </p>

Teil 2: CSS3

Dieser Teil ist der Schwerpunkt unseres Abschnitts. Wie im Bild oben gezeigt, sind die Positionen der Fotos unterschiedlich. Wir werden auf jeden Fall die Wissenspunkte von CSS3 verwenden:

• CSS3-Rotation drehen
•CSS3-Skalierung
•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. Freunde, wenn Sie interessiert sind, probieren Sie es selbst aus und veröffentlichen Sie Ihre schönen Fotos, um sie anzusehen.

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

Der obige Implementierungscode zum Erstellen einer schönen Fotowand mit CSS3 ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und hoffe, dass Sie die chinesische PHP-Website unterstützen.

Das obige ist der detaillierte Inhalt vonTeilen Sie den Implementierungscode zum Erstellen wunderschöner Fotowände mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!