照片墙 

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <link href="css/demo.css" rel="stylesheet" />
 7 </head>
 8 <body>
 9     <div class="pic1 pic"><img src="img/1.jpg"/></div>
10     <div class="pic2 pic"><img src="img/2.jpg" /></div>
11     <div class="pic3 pic"><img src="img/3.png" /></div>
12     <div class="pic4 pic"><img src="img/4.jpg" /></div>
13     <div class="pic5 pic"><img src="img/5.jpg" /></div>
14     <div class="pic6 pic"><img src="img/6.jpeg" /></div>
15     <div class="pic7 pic"><img src="img/7.jpg" /></div>
16     <div class="pic8 pic"><img src="img/8.jpg" /></div>
17     <div class="pic9 pic"><img src="img/9.jpg" /></div>
18 </body>
19 </html>
 1 .pic img{
 2     width:100px;
 3     border:solid 2px #fff;
 4     border-radius:12px;
 5     cursor:pointer;
 6 }
 7 body{
 8     background-color:#ed9898;
 9 }
10 .pic{
11     position:absolute;
12 }
13 .pic1{
14     transform:rotate(30deg);
15     top:100px;
16     left:100px;
17 }
18 .pic2{
19     transform:rotate(-30deg);
20     top:150px;
21     left:150px;
22 }
23 
24 .pic3{
25     transform:rotate(40deg);
26     top:180px;
27     left:180px;
28 }
29 
30 .pic4{
31     transform:rotate(-20deg);
32     top:100px;
33     left:230px;
34 }
35 
36 .pic5{
37     transform:rotate(-40deg);
38     top:230px;
39     left:180px;
40 }
41 
42 .pic6{
43     transform:rotate(34deg);
44     top:140px;
45     left:250px;
46 }
47 
48 .pic7{
49     transform:rotate(55deg);
50     top:90px;
51     left:350px;
52 }
53 
54 .pic8{
55     transform:rotate(-22deg);
56     top:240px;
57     left:450px;
58 }
59 
60 .pic9{
61     transform:rotate(-24deg);
62     top:80px;
63     left:250px;
64 }
65 .pic:hover{
66     transform:rotate(0deg) scale(1.5);/*0度归位*/
67     transition:transform ease 1s;
68     z-index:2;/*默认是1，大的数字在上面*/
69 }

 

posted @ 2017-07-14 19:01  *不忘初心*  阅读(268)  评论(0)  编辑  收藏  举报