首页 > 代码库 > 照片墙

照片墙

2024-10-26 00:00:39   210人阅读

 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="http://www.mamicode.com/css/demo.css" rel="stylesheet" />
 7 </head>
 8 <body>
 9     <div class="pic1 pic"><img src="http://www.mamicode.com/img/1.jpg"/></div>
10     <div class="pic2 pic"><img src="http://www.mamicode.com/img/2.jpg" /></div>
11     <div class="pic3 pic"><img src="http://www.mamicode.com/img/3.png" /></div>
12     <div class="pic4 pic"><img src="http://www.mamicode.com/img/4.jpg" /></div>
13     <div class="pic5 pic"><img src="http://www.mamicode.com/img/5.jpg" /></div>
14     <div class="pic6 pic"><img src="http://www.mamicode.com/img/6.jpeg" /></div>
15     <div class="pic7 pic"><img src="http://www.mamicode.com/img/7.jpg" /></div>
16     <div class="pic8 pic"><img src="http://www.mamicode.com/img/8.jpg" /></div>
17     <div class="pic9 pic"><img src="http://www.mamicode.com/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 }

 

照片墙


联系
我们