CSS3实现照片墙的布局及动画效果

目标：实现照片墙布局和鼠标经过图片时的动画效果

涉及知识点：CSS3的动画、过渡、变形（缩放），绝对定位与相对定位

疑点：绝对定位与相对定位对页面元素显示层次的影响

参考极客学院布道师iwen的课程

 

源码——

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link type="text/css" href="picwall.css" rel="stylesheet">
 7 </head>
 8 <body>
 9     <div class="con">
10         <img class="pic pic25" src="img/25.jpg">
11         <img class="pic pic26" src="img/26.jpg">
12         <img class="pic pic27" src="img/27.jpg">
13         <img class="pic pic28" src="img/28.jpg">
14         <img class="pic pic29" src="img/29.jpg">
15         <img class="pic pic30" src="img/30.jpg">
16         <img class="pic pic31" src="img/31.jpg">
17         <img class="pic pic32" src="img/32.jpg">
18         <img class="pic pic33" src="img/33.jpg">
19         <img class="pic pic34" src="img/34.jpg">
20         <img class="pic pic35" src="img/35.jpg">
21         <img class="pic pic36" src="img/36.jpg">
22     </div>
23 
24 </body>
25 </html>
View Code-html
 1 *{
 2     margin: 0px;
 3 }
 4 body{
 5     background-color: gainsboro;
 6 }
 7 .con{
 8     width: 960px;
 9     height: 450px;
10     margin: 50px auto;
11     /*position: relative;*/
12 }
13 .pic{
14     width: 130px;
15     padding: 10px;
16     /*position: relative;*/
17 }
18 .con img{
19     /*padding:10px 10px 15px ;*/
20     /*border: 1px solid #aaaaaa;*/
21     /*box-shadow: 2px 2px 2px rgba(60,60,60,0.5);*/
22     /*position: absolute;*/
23     z-index: 1;
24     transition: all 0.6s ease-in;
25 }
26 .con img:hover{
27     z-index: 2;/*实现鼠标经过时图片置于顶层，但这要求img里使用绝对定位
28                 相应的每个图片的位置也要重新修改*/
29     transform: rotate(0deg) scale(1.2);
30 }
31 .pic25{
32     left: 10px;
33     top: 0px;
34     transform: rotate(-6deg);
35     -webkit-transform: rotate(-6deg);/*chrome浏览器适配*/
36 }
37 .pic26{
38     left: -2px;
39     top: 10px;
40     transform: rotate(0deg);
41     /*此处应该加上浏览器适配，默认使用chrome浏览器测试，后面同样*/
42 }
43 .pic27{
44     left: 2px;
45     top: 0px;
46     transform: rotate(-16deg);
47 }
48 .pic28{
49     left: -2px;
50     top: 0px;
51     transform: rotate(-6deg);
52 }
53 .pic29{
54     left: 10px;
55     top: 20px;
56     transform: rotate(20deg);
57 }
58 .pic30{
59     left: 10px;
60     top: 0px;
61     transform: rotate(-6deg);
62 }
63 .pic31{
64     left: 10px;
65     top: 0px;
66     transform: rotate(-6deg);
67 }
68 .pic32{
69     left: 10px;
70     bottom: -7px;
71     transform: rotate(16deg);
72 }
73 .pic33{
74     left: 10px;
75     top: 0px;
76     transform: rotate(-6deg);
77 }
78 .pic34{
79     left: 3px;
80     top: 10px;
81     transform: rotate(3deg);
82 }
83 .pic35{
84     left: 10px;
85     top: 0px;
86     transform: rotate(-16deg);
87 }
88 .pic36{
89     left: 20px;
90     top: 0px;
91     transform: rotate(10deg);
92 }
View Code-css

 











            

            
posted @ 
2015-09-10 12:07 
systemor 
阅读(848) 
评论(0) 
 
收藏 
举报