zlib0210
3 years ago
1 changed files with 197 additions and 177 deletions
Unified View
Diff Options
-
374index.html
@ -1,205 +1,225 @@ |
|||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||
<html lang="en"> |
<html lang="en"> |
||||
|
|
||||
<head> |
|
||||
<meta charset="utf-8" /> |
|
||||
<title>建党百年</title> |
|
||||
<meta name="keywords" content="keyword1,keyword2,keyword3"> |
|
||||
<meta name="description" content="this is my page"> |
|
||||
<meta name="content-type" content="text/html; charset=UTF-8"> |
|
||||
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"> |
|
||||
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> |
|
||||
<script src="js/comment.js" type="text/javascript" charset="utf-8"></script> |
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css" /> |
|
||||
<link rel="stylesheet" type="text/css" href="css/begin.css" /> |
|
||||
|
|
||||
<style> |
|
||||
/* body { |
|
||||
|
<head> |
||||
|
<meta charset="utf-8" /> |
||||
|
<title>建党百年</title> |
||||
|
<meta name="keywords" content="keyword1,keyword2,keyword3"> |
||||
|
<meta name="description" content="this is my page"> |
||||
|
<meta name="content-type" content="text/html; charset=UTF-8"> |
||||
|
<meta name="viewport" |
||||
|
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"> |
||||
|
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> |
||||
|
<script src="js/comment.js" type="text/javascript" charset="utf-8"></script> |
||||
|
<link rel="stylesheet" type="text/css" href="css/style.css" /> |
||||
|
<link rel="stylesheet" type="text/css" href="css/begin.css" /> |
||||
|
|
||||
|
<style> |
||||
|
/* body { |
||||
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; |
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; |
||||
} */ |
} */ |
||||
|
|
||||
* { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
list-style-type: none; |
|
||||
} |
|
||||
|
|
||||
a, |
|
||||
img { |
|
||||
border: 0; |
|
||||
} |
|
||||
|
|
||||
canvas { |
|
||||
background: url("../img/6.jpg"); |
|
||||
background-size: 100% !important; |
|
||||
} |
|
||||
|
|
||||
.threeanimate { |
|
||||
-webkit-transform: translate3d(0, 0, 0); |
|
||||
-moz-transform: translate3d(0, 0, 0); |
|
||||
-ms-transform: translate3d(0, 0, 0); |
|
||||
transform: translate3d(0, 0, 0); |
|
||||
animation: goanimate 4s linear 3s; |
|
||||
} |
|
||||
|
|
||||
@keyframes goanimate { |
|
||||
0% { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
100% { |
|
||||
opacity: 0.3; |
|
||||
} |
|
||||
} |
|
||||
/* flash */ |
|
||||
|
|
||||
.flash { |
|
||||
position: relative; |
|
||||
display: none; |
|
||||
z-index: 1000; |
|
||||
} |
|
||||
|
|
||||
.flash li { |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
top: 0; |
|
||||
|
|
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
list-style-type: none; |
||||
|
} |
||||
|
|
||||
|
a, |
||||
|
img { |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
canvas { |
||||
|
background: url("../img/6.jpg"); |
||||
|
background-size: 100% !important; |
||||
|
} |
||||
|
|
||||
|
.threeanimate { |
||||
|
-webkit-transform: translate3d(0, 0, 0); |
||||
|
-moz-transform: translate3d(0, 0, 0); |
||||
|
-ms-transform: translate3d(0, 0, 0); |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
animation: goanimate 4s linear 3s; |
||||
|
} |
||||
|
|
||||
|
@keyframes goanimate { |
||||
|
0% { |
||||
|
opacity: 1; |
||||
} |
} |
||||
|
|
||||
.imganimat { |
|
||||
animation: identifier 2s linear 2s; |
|
||||
transition: opacity 2s linear 1s; |
|
||||
|
|
||||
|
100% { |
||||
|
opacity: 0.3; |
||||
} |
} |
||||
|
|
||||
@keyframes identifier { |
|
||||
0% { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
100% { |
|
||||
opacity: .5; |
|
||||
} |
|
||||
|
} |
||||
|
|
||||
|
/* flash */ |
||||
|
|
||||
|
.flash { |
||||
|
position: relative; |
||||
|
display: none; |
||||
|
z-index: 1000; |
||||
|
} |
||||
|
|
||||
|
.flash li { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
|
||||
|
.imganimat { |
||||
|
animation: identifier 2s linear 2s; |
||||
|
transition: opacity 2s linear 1s; |
||||
|
} |
||||
|
|
||||
|
@keyframes identifier { |
||||
|
0% { |
||||
|
opacity: 1; |
||||
} |
} |
||||
|
|
||||
.firstimg { |
|
||||
position: absolute; |
|
||||
|
|
||||
|
100% { |
||||
|
opacity: .5; |
||||
} |
} |
||||
|
|
||||
.dialog { |
|
||||
background: rgba(0, 0, 0, 0.5); |
|
||||
/* background-image: url('./img/sksdbg.jpg'); |
|
||||
|
} |
||||
|
|
||||
|
.firstimg { |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.dialog { |
||||
|
background: rgba(0, 0, 0, 1); |
||||
|
/* background-image: url('./img/sksdbg.jpg'); |
||||
background-size: cover; */ |
background-size: cover; */ |
||||
overflow: hidden; |
|
||||
/* display: none; */ |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
animation: dialoganimate 1s linear 4s; |
|
||||
} |
|
||||
|
|
||||
.dialog p { |
|
||||
font-size: .46rem; |
|
||||
} |
|
||||
|
|
||||
@keyframes dialoganimate { |
|
||||
0% { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
100% { |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
|
overflow: hidden; |
||||
|
/* display: none; */ |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
animation: dialoganimate 1s linear 4s; |
||||
|
} |
||||
|
|
||||
|
.dialog p { |
||||
|
font-size: .96rem; |
||||
|
font-family: '楷体'; |
||||
|
} |
||||
|
|
||||
|
@keyframes dialoganimate { |
||||
|
0% { |
||||
|
opacity: 1; |
||||
} |
} |
||||
.logo{ |
|
||||
position: absolute; |
|
||||
left: 0.2rem; |
|
||||
bottom: 0.2rem; |
|
||||
width: 1rem!important; |
|
||||
height: 1rem!important; |
|
||||
|
|
||||
|
100% { |
||||
|
opacity: 0.8; |
||||
} |
} |
||||
</style> |
|
||||
</head> |
|
||||
|
|
||||
<body> |
|
||||
<div id="wrap"> |
|
||||
<!-- <canvas id="c"></canvas> --> |
|
||||
<img src="./img/5.jpg" class="firstimg" alt=""> |
|
||||
<img src="./img/logo.png" class="logo" alt=""> |
|
||||
<div class="dialog" style="opacity:0"> |
|
||||
<p style="color: white;"> 时空隧道开启</p> |
|
||||
</div> |
|
||||
<img src="./img/djs.gif" class="djs" style="display:none" alt=""> |
|
||||
<div class="suidao" style="display: none;"> |
|
||||
<img src="./img/suidao.gif" alt=""> |
|
||||
</div> |
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> |
|
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
position: absolute; |
||||
|
left: 0.2rem; |
||||
|
bottom: 0.2rem; |
||||
|
width: 1rem !important; |
||||
|
height: 1rem !important; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div id="wrap"> |
||||
|
<!-- <canvas id="c"></canvas> --> |
||||
|
<img src="./img/5.jpg" class="firstimg" alt=""> |
||||
|
<img src="./img/logo.png" class="logo" alt=""> |
||||
|
<div class="dialog" style="opacity:0"> |
||||
|
<p style="color: white;"> 时空隧道开启</p> |
||||
</div> |
</div> |
||||
|
<img src="./img/djs.gif" class="djs" style="display:none" alt=""> |
||||
|
<div class="suidao" style="display: none;"> |
||||
|
<img src="./img/suidao.gif" alt=""> |
||||
|
</div> |
||||
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
<script> |
|
||||
$(document).ready(function() { |
|
||||
var height = document.documentElement.clientWidth, |
|
||||
width = document.documentElement.clientHeight; |
|
||||
$('img').css({ |
|
||||
'width': width, |
|
||||
'height': height |
|
||||
|
<script> |
||||
|
$(document).ready(function () { |
||||
|
var height = document.documentElement.clientWidth, |
||||
|
width = document.documentElement.clientHeight; |
||||
|
$('img').css({ |
||||
|
'width': width, |
||||
|
'height': height |
||||
|
}) |
||||
|
$(".dialog").css({ |
||||
|
'width': width, |
||||
|
'height': height |
||||
|
}) |
||||
|
$('.suidao').css({ |
||||
|
'width': width, |
||||
|
'height': height |
||||
|
}) |
||||
|
$('.suidao img').css({ |
||||
|
'width': width, |
||||
|
'height': height |
||||
|
}) |
||||
|
$(".firstimg").addClass('imganimat') |
||||
|
setTimeout(function () { |
||||
|
$(".firstimg").css({ |
||||
|
'opacity': '0', |
||||
|
'z-index': '1' |
||||
}) |
}) |
||||
|
$(".logo").animate({ |
||||
|
'opacity': 0 |
||||
|
}, 2000) |
||||
|
$(".dialog").animate({ |
||||
|
'opacity': 1 |
||||
|
}, 2000) |
||||
|
|
||||
|
}, 2000) |
||||
|
setTimeout(function () { |
||||
|
|
||||
$(".dialog").css({ |
$(".dialog").css({ |
||||
'width': width, |
|
||||
'height': height |
|
||||
|
display: 'none' |
||||
}) |
}) |
||||
$('.suidao').css({ |
|
||||
'width': width, |
|
||||
'height': height |
|
||||
|
$(".djs").css({ |
||||
|
display: 'block' |
||||
}) |
}) |
||||
$('.suidao img').css({ |
|
||||
'width': width, |
|
||||
'height': height |
|
||||
|
}, 5000) |
||||
|
setTimeout(function () { |
||||
|
// $(".flash").css({ display: 'block' }) |
||||
|
$(".djs").css({ |
||||
|
display: 'none' |
||||
}) |
}) |
||||
$(".firstimg").addClass('imganimat') |
|
||||
setTimeout(function() { |
|
||||
$(".firstimg").css({ |
|
||||
'opacity': '0', |
|
||||
'z-index': '1' |
|
||||
}) |
|
||||
$(".logo").animate({ |
|
||||
'opacity':0 |
|
||||
},2000) |
|
||||
$(".dialog").animate({ |
|
||||
'opacity':1 |
|
||||
},2000) |
|
||||
|
|
||||
}, 2000) |
|
||||
setTimeout(function() { |
|
||||
|
|
||||
$(".dialog").css({ |
|
||||
display: 'none' |
|
||||
}) |
|
||||
$(".djs").css({ |
|
||||
display: 'block' |
|
||||
}) |
|
||||
}, 5000) |
|
||||
setTimeout(function() { |
|
||||
// $(".flash").css({ display: 'block' }) |
|
||||
$(".djs").css({ |
|
||||
display: 'none' |
|
||||
}) |
|
||||
$(".suidao").css({ |
|
||||
display: 'block' |
|
||||
}) |
|
||||
}, 8000) |
|
||||
|
$(".suidao").css({ |
||||
|
display: 'block' |
||||
|
}) |
||||
|
}, 8000) |
||||
// setTimeout(function(){ |
// setTimeout(function(){ |
||||
// $(".suidao").animate({ |
// $(".suidao").animate({ |
||||
// 'opacity':0 |
// 'opacity':0 |
||||
// },13000) |
// },13000) |
||||
// }) |
// }) |
||||
|
|
||||
}); |
|
||||
|
|
||||
setTimeout(function() { |
|
||||
window.location.href="begin.html" |
|
||||
}, 13000) |
|
||||
// 横屏 |
|
||||
</script> |
|
||||
<script src="js/common.js" type="text/javascript" charset="utf-8"></script> |
|
||||
<script src="js/three.min.js" type="text/javascript" charset="utf-8"></script> |
|
||||
</body> |
|
||||
|
}); |
||||
|
setTimeout(function () { |
||||
|
$(".suidao").animate({ |
||||
|
'opacity': 0.9 |
||||
|
}, 1000) |
||||
|
}, 10000) |
||||
|
setTimeout(function () { |
||||
|
$(".suidao").animate({ |
||||
|
'opacity': 0.6 |
||||
|
}, 1000) |
||||
|
}, 11000) |
||||
|
setTimeout(function () { |
||||
|
$(".suidao").animate({ |
||||
|
'opacity': 0.3 |
||||
|
}, 1000) |
||||
|
}, 12000) |
||||
|
setTimeout(function () { |
||||
|
window.location.href = "begin.html" |
||||
|
}, 13000) |
||||
|
</script> |
||||
|
<script src="js/common.js" type="text/javascript" charset="utf-8"></script> |
||||
|
<script src="js/three.min.js" type="text/javascript" charset="utf-8"></script> |
||||
|
</body> |
||||
|
|
||||
</html> |
</html> |
||||