Utilisez CSS3 pour créer des effets spéciaux pour les murs de photos-tutoriel CSS-php.cn

Utilisez CSS3 pour créer des effets spéciaux pour les murs de photos

不言

Libérer： 2018-06-11 09:25:34

original

2774 Les gens l'ont consulté

Cet article présente principalement en détail les étapes spécifiques de création d'un beau mur de photos avec CSS3. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple dans cet article est à partager avec vous. l'utilisation de CSS3 Les étapes détaillées pour créer un mur de photos animé sont pour votre référence Le contenu spécifique est le suivant

Le premier effet :

Le code Html est. comme suit :

<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>

Copier après la connexion

Le code CSS est le suivant :

<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>

Copier après la connexion

Rendu :

La deuxième implémentation effet :

Première partie : HTML

Ici, nous mettons d'abord dix images sur le page. (Si vous avez de belles photos, n'hésitez pas à les poster !)

<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>

Copier après la connexion

Partie 2 : CSS3

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

Rotation CSS3
Échelle de mise à l'échelle CSS3
CSS3. shadow box-shadow

Oui, avec ces fonctions on peut réaliser 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);   
}   
/*   下面的代码大同小异就不依依展示了    */

Copier après la connexion

Un code aussi simple peut obtenir l'effet montré dans l'image ci-dessus. Amis, si vous êtes intéressés, 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 !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment implémenter des ellipses d'affichage de débordement de texte sur une seule ligne et sur plusieurs lignes avec CSS

Comment pour implémenter des icônes CSS Aligner avec le texte

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!