-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathshanghai.html
113 lines (109 loc) · 3.79 KB
/
shanghai.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
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>上海</title>
<style type="text/css">
*{padding: 0;
margin: 0;}
body,html{height:100%;}
body{
background-image: url(related/07.jpg)
;
}
#box{width: 280px;
height: 400px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: auto;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
animation: go 45s linear infinite;
}
#box img{width: 280px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
#box img:nth-child(1){
transform: rotateY(0deg) translateZ(650px);}
#box img:nth-child(2){
transform: rotateY(36deg) translateZ(650px);}
#box img:nth-child(3){
transform: rotateY(72deg) translateZ(650px);}
#box img:nth-child(4){
transform: rotateY(108deg) translateZ(650px);}
#box img:nth-child(5){
transform: rotateY(144deg) translateZ(650px);}
#box img:nth-child(6){
transform: rotateY(180deg) translateZ(650px);}
#box img:nth-child(7){
transform: rotateY(216deg) translateZ(650px);}
#box img:nth-child(8){
transform: rotateY(252deg) translateZ(650px);}
#box img:nth-child(9){
transform: rotateY(288deg) translateZ(650px);}
#box img:nth-child(10){
transform: rotateY(324deg) translateZ(650px);}
@keyframes go {
0%{transform: rotateX(0deg) rotateY(0deg);}
25%{transform: rotateX(20deg) rotateY(180deg);}
50%{transform: rotateX(0deg) rotateY(360deg);}
75%{transform: rotateX(-20deg) rotateY(540deg);}
100%{transform: rotateX(0deg) rotateY(720deg);}
}
</style>
<link rel="stylesheet" href="style/css/bootstrap.min.css">
<script src="style/js/jquery.min.js"></script>
<script src="style/js/tether.min.js"></script>
<script src="style/js/bootstrap.min.js"></script>
<link href="style/css/style.css" type="text/css" rel="stylesheet" />
</head>
<body bgcolor="#00B7EE">
<div class="nav">
<a class="logo" href="index.html"><img src="style/images/logo.png" width="40" title="红"></a>
<span id="site_runtime" style="color:white; font-size: xx-small;"></span>
<a class="logo pull-right sobtn"><span class="glyphicon glyphicon-search" style="color: #B4B4B4;"></span></a>
</div>
<div id="box">
<img src="img/a1.jpg">
<img src="img/a2.jpg">
<img src="img/a3.jpg">
<img src="img/a4.jpg">
<img src="img/a5.jpg">
<img src="img/a6.jpg">
<img src="img/a7.jpg">
<img src="img/a8.jpg">
<img src="img/a9.jpg">
<img src="img/a10.jpg">
</div>
<!--
时间：2019-04-18
描述：时间
-->
<script type="text/javascript">
function show_site_runtime(){
window.setTimeout("show_site_runtime()",1000); // 每秒运行一次函数
X=new Date("04/10/2019 00:00:00"); //在这里修改你的建站时间
Y=new Date();
T=(Y.getTime()-X.getTime()); // 获取当前时间与指定时间之间的时间间隔（ms）
i=24*60*60*1000;
d=T/i;
D=Math.floor(d); // 计算天数并向下取整
h=(d-D)*24;
H=Math.floor(h); // 计算剩余不足一天的小时数并向下取整
m=(h-H)*60;
M=Math.floor(m); // 计算剩余不足一小时的分钟数并向下取整
s=(m-M)*60;
S=Math.floor(s); // 计算剩余不足一分钟的秒数并向下取整
site_runtime.innerHTML="现在是："+ Y+ "<br>" +"网站已平稳运行："+D + " 天 " + H + " 小时 " + M + " 分 " + S + " 秒 ";
}
show_site_runtime();
</script>
</body>
</html>