Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3

Tout le monde doit savoir que CSS3 peut créer des animations, mais avez-vous déjà utilisé intelligemment cette fonction pour créer un magnifique mur de photos ?

Aujourd'hui, nous allons utiliser la fonction d'animation CSS3 pour créer ensemble un magnifique mur de photos !

Première partie : HTML

Ici, nous mettons d'abord dix images sur la page. (Si vous avez de belles photos, postez-les s'il vous plaît !)

<p class="content">
    <img  class="pic1" src="img/1.jpg" / alt="Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3" >
    <img  class="pic2" src="img/2.jpg" / alt="Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3" >
    <img  class="pic3" src="img/3.jpg" / alt="Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3" >
    <img  class="pic4" src="img/4.jpg" / alt="Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3" >
    <img  class="pic5" src="img/5.jpg" / alt="Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3" >
    <img  class="pic6" src="img/6.jpg" / alt="Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3" >
    <img  class="pic7" src="img/7.jpg" / alt="Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3" >
    <img  class="pic8" src="img/8.jpg" / alt="Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3" >
    <img  class="pic9" src="img/9.jpg" / alt="Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3" >
    <img  class="pic10" src="img/10.jpg" / alt="Partagez le code d'implémentation pour créer de magnifiques murs de photos avec CSS3" >
 </p>

Partie 2 : CSS3

Cette partie C'est l'objet de notre section. Comme le montre l'image ci-dessus, les positions des photos sont différentes. Nous utiliserons certainement les points de connaissance de CSS3 :

• Rotation CSS3. rotation
•Échelle CSS3
•CSS3 shadow box-shadow

Oui, avec ces fonctions, nous pouvons créer un magnifique mur de photos. Jetons un coup d'œil à notre code. Seule une partie du code est affichée ici. Les amis intelligents doivent savoir comment le faire !

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

Un code aussi simple peut obtenir l'effet montré dans l'image ci-dessus. Amis, si vous êtes intéressé, essayez-le vous-même et postez vos belles photos pour voir.

PS : CSS3 peut également créer des effets plus merveilleux et plus magnifiques. Si vous êtes intéressé, vous pouvez l'étudier en profondeur !

Le code d'implémentation ci-dessus pour créer un magnifique mur de photos avec CSS3 est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez le site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!