Maison >interface Web >tutoriel CSS >Utilisez CSS3 pour créer des effets spéciaux pour les murs de photos
Utilisez CSS3 pour créer des effets spéciaux pour les murs de photos
- 不言original
- 2018-06-11 09:25:342864parcourir
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>
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>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>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);
}
/* 下面的代码大同小异就不依依展示了 */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 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!