Share CSS3 to make beautiful photo wall implementation code

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.