CSS3 make beautiful photo wall

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!

650) this.width=650; "class=" AlignCenter size-full wp-image-925 "src=" http://www.aliyue.net/wp-content/uploads/2016 /05/photo1.png "alt=" photo "width=" "height=" "style=" height:auto;vertical-align:middle;border:0px; text-align:center;margin:0px auto; "/>

The first part:HTML

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

<div class= "Content" >          

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;    /*  Animation time  */     -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 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!

There is a need to demo of the small partners click: Xiao Yue blog message to me Oh!

This article is from the "Xiao Yue Blog" blog, please be sure to keep this source http://aliyue.blog.51cto.com/11564403/1775086

CSS3 make beautiful photo wall