You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.7 KiB
81 lines
1.7 KiB
<!doctype html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8" /> |
|
<link rel="icon" type="image/svg+xml" href="/favicon.png" /> |
|
<meta name="viewport" |
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> |
|
<title>局长信箱</title> |
|
</head> |
|
|
|
<body> |
|
<div id="app"> |
|
<span class="loader"></span> |
|
</div> |
|
</div> |
|
<script type="module" src="/src/main.ts"></script> |
|
</body> |
|
<style> |
|
.loader { |
|
border-style: solid; |
|
box-sizing: border-box; |
|
border-width: 40PX 60PX 30PX 60PX; |
|
border-color: #3760C9 #96DDFC #96DDFC #36BBF7; |
|
animation: envFloating 1s ease-in infinite alternate; |
|
position: fixed; |
|
top: 50%; |
|
right: 50%; |
|
transform: translate(-50%, -50%); |
|
} |
|
|
|
.loader:after { |
|
content: ""; |
|
position: absolute; |
|
right: 62PX; |
|
top: -40PX; |
|
height: 70PX; |
|
width: 50PX; |
|
background-image: |
|
linear-gradient(#162582 45PX, transparent 0), |
|
linear-gradient(#162582 45PX, transparent 0), |
|
linear-gradient(#162582 45PX, transparent 0); |
|
background-repeat: no-repeat; |
|
background-size: 30PX 4PX; |
|
background-position: 0PX 11PX, 8PX 35PX, 0PX 60PX; |
|
animation: envDropping 0.75s linear infinite; |
|
} |
|
|
|
@keyframes envFloating { |
|
0% { |
|
transform: translate(-2PX, -5PX) |
|
} |
|
|
|
100% { |
|
transform: translate(0, 5PX) |
|
} |
|
} |
|
|
|
@keyframes envDropping { |
|
0% { |
|
background-position: 100PX 11PX, 115PX 35PX, 105PX 60PX; |
|
opacity: 1; |
|
} |
|
|
|
50% { |
|
background-position: 0PX 11PX, 20PX 35PX, 5PX 60PX; |
|
} |
|
|
|
60% { |
|
background-position: -30PX 11PX, 0PX 35PX, -10PX 60PX; |
|
} |
|
|
|
75%, |
|
100% { |
|
background-position: -30PX 11PX, -30PX 35PX, -30PX 60PX; |
|
opacity: 0; |
|
} |
|
} |
|
</style> |
|
|
|
</html> |