CSS3 creates beautiful photo walls and css3 photo walls

CSS3 creates beautiful photo walls and css3 photo walls

CSS 3 can be used as an animation, which is familiar to everyone. But do you have the ability to use this function to create a beautiful photo wall?

Today, we will use CSS3 animation to create beautiful photo walls!

<Div class = "content"> </ div>

 

Part 2: CSS3

This part is the focus of this section. The positions of the photos shown in this section are different. We will certainly use the following CSS3 knowledge points:

• CSS3 RotationRotate
• CSS 3 scalingScale
• CSS3 shadowBox-shadow

That's right. We can create a beautiful photo wall. Let's take a look at our code. Here we only show some of the Code. 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 # cccccccc;/* animation time */-moz-transition: 0.5 s; -webkit-transition: 0.5 s; transition: 0.5 s;} 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 code below is similar and will not be displayed as needed */

It is such a simple code that can achieve the effect shown. If you are interested, you can try to show your photos.

PS: CSS3 can also write more brilliant results. If you are interested, you can study it in depth!

You can leave a message for me if you need a Demo. This time we will not download it!