You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

182 lines
5.4 KiB
HTML

3 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico">
<title>区块链金融-数字货币</title>
3 years ago
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style>
html,
body {
width: 100%;
3 years ago
height: 100%;
margin: 0;
3 years ago
}
#loading-wrapper {
width: 100vw;
height: 100vh;
background-color: #080915;
3 years ago
}
.loader {
3 years ago
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -30px;
animation: stars-rotate-reverse 2s ease infinite;
position: relative;
width: 60px;
height: 60px;
3 years ago
border-radius: 50%;
display: inline-block;
vertical-align: middle;
3 years ago
}
.text{
text-align: center;
position: relative;
top: 50%;
color: #fff;
3 years ago
}
.loader-star {
3 years ago
position: absolute;
}
.loader-star polygon {
fill: #d500f9 !important;
3 years ago
}
.loader .star1 {
top: 0px;
right: -7px;
3 years ago
}
.loader .star2 {
right: 9px;
top: -12px;
position: absolute;
transform: scale(0.8);
animation: stars-catch 2s 0.1s ease infinite;
3 years ago
}
.loader .star3 {
right: 27px;
top: -11px;
position: absolute;
transform: scale(0.7);
animation: stars-catch 2s 0.15s ease infinite;
3 years ago
}
.loader .star4 {
right: 41px;
top: -2px;
position: absolute;
transform: scale(0.6);
animation: stars-catch 2s 0.2s ease infinite;
3 years ago
}
.loader .star5 {
right: 47px;
top: 10px;
position: absolute;
transform: scale(0.5);
-webkit-animation: stars-catch 2s 0.25s ease infinite;
animation: stars-catch 2s 0.25s ease infinite;
3 years ago
}
.loader .star6 {
right: 47px;
top: 21px;
position: absolute;
transform: scale(0.4);
animation: stars-catch 2s 0.3s ease infinite;
3 years ago
}
@keyframes stars-catch {
75% {
top: -2px;
right: -11px;
opacity: 0;
}
3 years ago
}
@keyframes stars-rotate-reverse {
0% {
transform: rotate(0deg);
}
3 years ago
100% {
transform: rotate(360deg);
}
3 years ago
}
</style>
</head>
<body>
<div id="app">
<div id="loading-wrapper">
<div class="loader">
<svg class="loader-star star1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
viewBox="0 0 23.172 23.346" xml:space="preserve">
<polygon
points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
</polygon>
</svg>
<svg class="loader-star star2" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
viewBox="0 0 23.172 23.346" xml:space="preserve">
<polygon
points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
</polygon>
</svg>
<svg class="loader-star star3" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
viewBox="0 0 23.172 23.346" xml:space="preserve">
<polygon
points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
</polygon>
</svg>
<svg class="loader-star star4" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
viewBox="0 0 23.172 23.346" xml:space="preserve">
<polygon
points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
</polygon>
</svg>
<svg class="loader-star star5" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
viewBox="0 0 23.172 23.346" xml:space="preserve">
<polygon
points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
</polygon>
</svg>
<svg class="loader-star star6" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px"
viewBox="0 0 23.172 23.346" xml:space="preserve">
<polygon
points="11.586,0 8.864,8.9 0,8.9 7.193,14.447 4.471,23.346 11.586,17.84 18.739,23.346 16.77,14.985 23.172,8.9 14.306,8.9">
</polygon>
</svg>
</div>
<div class="text">
玩命加载中……
</div>
3 years ago
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>