Share CSS3 to make beautiful photo wall implementation code

CSS3 can do animation everyone is certainly familiar with, but we have wood has cleverly used this function to make a beautiful photo wall it?

So today we will use the CSS3 animation feature to make beautiful photo wall together!

First part: HTML

Here we first put 10 pictures on the page. (If you have any good photos, come on!) ）

<p class= "Content" >                                         </p>

Part II: CSS3

This part is the focus of our section, as shown in the location of the photos are different, we will certainly use the CSS3 point of Knowledge:

CSS3 's Rotating rotate
Scaled scale for CSS3
The shadow of CSS3 Box-shadow

Yes, that's the function we can make a beautiful photo wall. Take a look at our code, just show some of the code and the smart little buddy 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;       /* Time of animation */-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); }/* The following code is not a very similar to show the * *

This is the simple code that can achieve the effect shown. The little friends are interested to try to put their own beautiful photos to see.

PS:CSS3 can also write more brilliant effects, small partners interested in in-depth study!

The above CSS3 to make beautiful photo wall implementation code is small to share all the content of everyone, hope to give you a reference, but also hope that we support a lot of topic.alibabacloud.com.