Share the implementation code for making beautiful photo walls with CSS3

CSS3 can be used for animation. Everyone must be familiar with it, but have you ever cleverly used this function to create a beautiful photo wall?

So today we will use the feature of CSS3 animation to create a beautiful photo wall together!

Part One: HTML

Here we first put ten pictures on the page. (If you have any beautiful photos, please post them!)

<p class="content">
    <img  class="pic1" src="img/1.jpg" / alt="Share the implementation code for making beautiful photo walls with CSS3" >
    <img  class="pic2" src="img/2.jpg" / alt="Share the implementation code for making beautiful photo walls with CSS3" >
    <img  class="pic3" src="img/3.jpg" / alt="Share the implementation code for making beautiful photo walls with CSS3" >
    <img  class="pic4" src="img/4.jpg" / alt="Share the implementation code for making beautiful photo walls with CSS3" >
    <img  class="pic5" src="img/5.jpg" / alt="Share the implementation code for making beautiful photo walls with CSS3" >
    <img  class="pic6" src="img/6.jpg" / alt="Share the implementation code for making beautiful photo walls with CSS3" >
    <img  class="pic7" src="img/7.jpg" / alt="Share the implementation code for making beautiful photo walls with CSS3" >
    <img  class="pic8" src="img/8.jpg" / alt="Share the implementation code for making beautiful photo walls with CSS3" >
    <img  class="pic9" src="img/9.jpg" / alt="Share the implementation code for making beautiful photo walls with CSS3" >
    <img  class="pic10" src="img/10.jpg" / alt="Share the implementation code for making beautiful photo walls with CSS3" >
 </p>

Part 2: CSS3

This part is us The focus of this section is, as shown in the picture above, the positions of the photos are different. We will definitely use the following knowledge points of CSS3:

•CSS3 rotation rotate
•CSS3 Zoom scale
•CSS3 shadow box-shadow

Yes, with these functions we can make a beautiful photo wall. Let’s take a look at our code. Only part of the code is shown here. Smart friends must know how to do it!

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

Such a simple code can achieve the effect shown in the picture above. If you are interested, you can try it yourself and post your beautiful photos to see.

PS: CSS3 can also create more wonderful and gorgeous effects. If you are interested, you can study it in depth!

The above implementation code for making a beautiful photo wall with CSS3 is all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website.

The above is the detailed content of Share the implementation code for making beautiful photo walls with CSS3. For more information, please follow other related articles on the PHP Chinese website!