1.儿童照片墙
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>儿童照片墙</title> 6 <link rel="stylesheet" type="text/css" href="css/zixuereset.css"/> 7 <link rel="stylesheet" type="text/css" href="css/picwall.css"/> 8 </head> 9 <body> 10 <div id=""> 11 <img id="img1" src="img/1.jpg" > 12 <img id="img2" src="img/2.jpg" > 13 <img id="img3" src="img/3.jpg" > 14 <img id="img4" src="img/4.jpg" > 15 <img id="img5" src="img/5.jpg" > 16 <img id="img6" src="img/6.jpeg" > 17 <img id="img7" src="img/7.jpg" > 18 <img id="img8" src="img/8.jpg" > 19 <img id="img9" src="img/9.jpg" > 20 </div> 21 </body> 22 </html>
picwall.css
1 * {
2 /* border: 1px solid black; */
3 }
4
5 div {
6 position: relative;
7 background: url(../img/630.jpg);
8 /* 调整图片尺寸,铺满整个屏幕,背景图像的某些部分也许无法显示在背景定位区域中 */
9 background-size: cover;
10 /* 不填充 */
11 /* background-repeat: no-repeat; */
12 }
13 body,html,div{
14 width: 100%;
15 height: 100%;/* div中的图片使用了定位,脱离标准文档流,图片不能作为内容支撑高度 */
16 }
17
18 img {
19 /* transform: scale(0.25); */
20 /* border: 1px solid black; */
21 width: 160px;
22 position: absolute;
23 padding: 10px 10px 15px;
24 background-color: #FFFFFF;
25 /* 阴影 */
26 box-shadow: 2px 2px 15px gray;
27 /* 当鼠标悬停至图片上时,将会放大,为图片放大设置过度效果 */
28 transition: all 0.5s /* ease-in */;
29 }
30
31 #img1:hover,#img2:hover,#img3:hover,#img4:hover,#img5:hover,#img6:hover,#img7:hover,#img8:hover,#img9:hover{
32 /* 单击时: */
33 /* 设置角度为0;设置缩放倍数为2 */
34 transform: rotate(0deg) scale(2.0);
35 /* 设置元素的堆叠顺序 */
36 z-index: 1;
37 text-align: center;
38 box-shadow: 10px 10px 20px gray;
39 display: inline-block;
40 position: fixed;
41 /* top: 50%;
42 left: 50%; */
43 }
44
45 #img9 {
46 left: 530px;
47 top: 140px;
48 transform: rotate(20deg);
49 }
50
51 #img8 {
52 left: 20px;
53 top: 250px;
54 transform: rotate(10deg);
55 }
56
57 #img7 {
58 left: 840px;
59 top: 100px;
60 transform: rotate(20deg);
61 }
62
63 #img6 {
64 left: 0px;
65 top: 80px;
66 transform: rotate(15deg);
67 }
68
69 #img5 {
70 left: 700px;
71 top: 70px;
72 transform: rotate(-10deg);
73 }
74
75 #img4 {
76 left: 380px;
77 top: 320px;
78 transform: rotate(-15deg);
79 }
80
81 #img3 {
82 left: 700px;
83 top: 290px;
84 transform: rotate(10deg);
85 }
86
87 #img2 {
88 left: 200px;
89 top: 100px;
90 transform: rotate(-20deg);
91 }
92
93 #img1 {
94 left: 400px;
95 top: 85px;
96 transform: rotate(-10deg);
97 }