-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlist.html
103 lines (102 loc) · 2.95 KB
/
list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>list</title>
<style type="text/css">
html,body{margin:0;padding:0;width:100%;height:100%;}
#bg{background: url(img/list_bg.png) no-repeat left top;background-size: cover;position:absolute;z-index:1;
width:100%;height:100%;top:0;left:0;
-webkit-filter: blur(60px);
-moz-filter: blur(60px);
-ms-filter: blur(60px);
filter: blur(60px);
}
#container{position:relative;z-index:2;top:0;left:0;margin:100px auto;width:1280px;height:720px;background:url(img/list_bg.png) no-repeat;box-shadow: 0 0 150px #fff;}
a{display:block;overflow:hidden;}
#list1,#list2,#list3,#list4{
-webkit-transition-duration:.5s;
-webkit-transition-timing-function: ease;
}
#list1{ position: absolute;
z-index: 10;
top: 160px;
left: 139px;
width: 203px;
transform: rotate(9deg);}
#list1:hover{
transform: scale(1.05) rotate(9deg);
}
#list2{ position: absolute;
z-index: 10;
top: 219px;
left: 388px;
width: 294px;
transform: rotate(12deg);}
#list2:hover{
transform: scale(1.05) rotate(12deg);
}
#list3{ position: absolute;
z-index: 9;
top: 200px;
left: 703px;
width: 244px;
transform: rotate(-11deg);}
#list3:hover{
z-index: 10;
transform: scale(1.05) rotate(-11deg);
}
#list4{ position: absolute;
z-index: 10;
top: 126px;
left: 983px;
width: 224px;
transform: rotate(-14deg);}
#list4:hover{
transform: scale(1.05) rotate(-14deg);
}
#jia1,#jia2,#jia3,#jia4{box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.45);}
#jia1{ position: absolute;
z-index: 11;
top: 70px;
left: 257px;
transform: rotate(-10deg);}
#jia2{ position: absolute;
z-index: 11;
top: 123px;
left: 517px;
transform: rotate(0deg);}
#jia3{ position: absolute;
z-index: 11;
top: 108px;
left: 799px;
transform: rotate(0deg);}
#jia4{ position: absolute;
z-index: 11;
top: 53px;
left: 1038px;
transform: rotate(12deg);}
#wenzi{ position: absolute;
z-index: 10;
top: 477px;
left: 349px;
width: 500px;
height: 143px;
}
</style>
</head>
<body>
<div id="bg"></div>
<div id="container">
<a><img id="jia1" src="img/jiazi.png"></a>
<a><img id="jia2" src="img/jiazi.png"></a>
<a><img id="jia3" src="img/jiazi.png"></a>
<a><img id="jia4" src="img/jiazi.png"></a>
<a ><img id="list1" src="img/list1.jpg"></a>
<a href="list_2.html"><img id="list2" src="img/list2.jpg"></a>
<a ><img id="list3" src="img/list3.jpg"></a>
<a ><img id="list4" src="img/list4.jpg"></a>
<a href="list_index.html" id="wenzi"></a>
</div>
</body>
</html>