樂
喜
安
平

HTML5-05

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 }

 

posted @ 2021-07-06 20:30  喵酱爱吃鱼  阅读(37)  评论(0)  编辑  收藏  举报