The example of this article for everyone to share the use of CSS3 animation to create a photo wall of the detailed steps for your reference, the specific contents are as follows
The first implementation effect:
The HTML code is as follows:
<body>The CSS code is as follows:
<style> * {margin:0; padding:0;} Body {background-color: #eee; padding-top:50px;} h2 {Text-align:center;} . container {position:relative; width:1000px; height:700px; margin:0px Auto;} img {position:absolute; top:50px; left:100px; cursor:pointer; padding:10px 10px 25px; Background-color: #fff; border:1px solid #ddd; transition:0.5s; box-shadow:3px 3px 3px #ccc; } . IMG1 {left:40px; top:20px; transform:rotate (30deg); z-index:1;} . img2 {left:156px; top:156px; transform:rotate ( -30deg); z-index:1;} . IMG3 {left:381px; top:60px; transform:rotate (30deg); z-index:1;} . IMG4 {left:458px; top:256px; transform:rotate (30deg); z-index:1;} . img5 {left:684px; top:110px; transform:rotate ( -40deg); z-index:1;} Img:hover {transform:rotate (0deg); Transform:scale (1.5); box-shadow:6px 6px 6px #656565; z-index:2;} </style>:
The second implementation effect:
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-shadowYes, 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 code below will not show the same.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 is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
