Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

高洛峰
Freigeben: 2017-03-09 10:36:32
Original
3623 Leute haben es durchsucht

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!

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

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

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);   
}/*   下面的代码大同小异就不依依展示了    */
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage