zlib0210
3 years ago
1 changed files with 197 additions and 177 deletions
Split View
Diff Options
-
374index.html
@ -1,205 +1,225 @@ |
|||
<!DOCTYPE html> |
|||
<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, "新宋体"; |
|||
} */ |
|||
|
|||
* { |
|||
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; */ |
|||
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> |
|||
<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({ |
|||
'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(){ |
|||
// $(".suidao").animate({ |
|||
// 'opacity':0 |
|||
// },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> |
|||