mirror of
https://github.com/liudf0716/apfree_wifidog.git
synced 2025-01-08 11:57:37 +08:00
Update wifidog-redir.html.front
This commit is contained in:
Dengfeng Liu
GitHub
parent
07bac2b5f4
commit
11723199b8
@ -2,107 +2,175 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
||||||
|
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
|
||||||
|
<!--[if lt IE 9]
|
||||||
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||||
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||||
|
<![endif]>-->
|
||||||
<title>正在为您加载，请稍候...</title>
|
<title>正在为您加载，请稍候...</title>
|
||||||
<style>
|
<style>
|
||||||
/* general styling */
|
body{
|
||||||
body {
|
background-color:#1f2228;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
.bar1 {
|
.icon-cont{
|
||||||
-moz-transform:rotate(0deg) translate(0, -40px);
|
|
||||||
-webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12;
|
|
||||||
}
|
|
||||||
.bar2 {
|
|
||||||
-moz-transform:rotate(45deg) translate(0, -40px);
|
|
||||||
-webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25;
|
|
||||||
}
|
|
||||||
.bar3 {
|
|
||||||
-moz-transform:rotate(90deg) translate(0, -40px);
|
|
||||||
-webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37;
|
|
||||||
}
|
|
||||||
.bar4 {
|
|
||||||
-moz-transform:rotate(135deg) translate(0, -40px);
|
|
||||||
-webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50;
|
|
||||||
}
|
|
||||||
.bar5 {
|
|
||||||
-moz-transform:rotate(180deg) translate(0, -40px);
|
|
||||||
-webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62;
|
|
||||||
}
|
|
||||||
.bar6 {
|
|
||||||
-moz-transform:rotate(225deg) translate(0, -40px);
|
|
||||||
-webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75;
|
|
||||||
}
|
|
||||||
.bar7 {
|
|
||||||
-moz-transform:rotate(270deg) translate(0, -40px);
|
|
||||||
-webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87;
|
|
||||||
}
|
|
||||||
.bar8 {
|
|
||||||
-moz-transform:rotate(315deg) translate(0, -40px);
|
|
||||||
-webkit-transform:rotate(315deg) translate(0, -40px);opacity:1;
|
|
||||||
}
|
|
||||||
#div2 {
|
|
||||||
position:relative;
|
|
||||||
width:100px;
|
width:100px;
|
||||||
height:100px;
|
height:100px;
|
||||||
margin:25px auto;
|
margin:160px auto 50px;
|
||||||
-moz-border-radius:100px;
|
padding-left:100px;
|
||||||
-moz-transform:scale(0.5);
|
|
||||||
-webkit-transform:scale(0.5);
|
|
||||||
/* not used right now: */
|
|
||||||
-webkit-animation-name: rotateThis;
|
|
||||||
-webkit-animation-duration:2s;
|
|
||||||
-webkit-animation-iteration-count:infinite;
|
|
||||||
-webkit-animation-timing-function:linear;
|
|
||||||
}
|
}
|
||||||
#div2 div
|
.hder{
|
||||||
{
|
font-family: "Microsoft YaHei";
|
||||||
width:10px;
|
font-weight:normal;
|
||||||
height:30px;
|
color:#77839b;
|
||||||
background:#000;
|
/*background: linear-gradient(#444, #222);*/
|
||||||
position:absolute;
|
padding:10px 0;
|
||||||
top:35px;
|
text-align:center;
|
||||||
left:45px;
|
margin:0;
|
||||||
|
font-size:18px;
|
||||||
|
width:200px;
|
||||||
|
height:40px;
|
||||||
|
line-height: 40px;;
|
||||||
|
|
||||||
|
background-image: -webkit-linear-gradient(left, #0abcdf, #073064 25%, #0abcdf 50%, #073064 75%, #0abcdf);
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-background-size: 200% 100%;
|
||||||
|
-webkit-animation: masked-animation 4s infinite linear;
|
||||||
|
text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: masked-animation 4s infinite linear;
|
||||||
}
|
}
|
||||||
#div2 div {
|
.footer{
|
||||||
-moz-border-radius-topleft:10px;
|
position: fixed;
|
||||||
-moz-border-radius-topright:10px;
|
bottom:20px;
|
||||||
-webkit-border-top-left-radius:10px;
|
text-align:center;
|
||||||
-webkit-border-top-right-radius:10px;
|
width:100%;
|
||||||
|
font-size:16px;
|
||||||
}
|
}
|
||||||
/* uncomment this to use css animation in webkit browsers */
|
.text{
|
||||||
/* @-webkit-keyframes rotateThis {
|
font-size:18px;
|
||||||
from {-webkit-transform:scale(0.5) rotate(0deg);}
|
text-align:center;
|
||||||
to {-webkit-transform:scale(0.5) rotate(360deg);}
|
font-family: "Microsoft YaHei";
|
||||||
} */
|
color:#0abcdf;
|
||||||
.text{ display: block; text-align: center;}
|
width:350px;
|
||||||
|
margin:0 auto;
|
||||||
|
|
||||||
|
background-image: -webkit-linear-gradient(left, #0abcdf, #073064 25%, #0abcdf 50%, #073064 75%, #0abcdf);
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-background-size: 200% 100%;
|
||||||
|
-webkit-animation: masked-animation 4s infinite linear;
|
||||||
|
text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: masked-animation 4s infinite linear;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes masked-animation {
|
||||||
|
0% { background-position: 0 0;}
|
||||||
|
100% { background-position: -100% 0;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes ball-spin-fade-loader {
|
||||||
|
50% {
|
||||||
|
opacity: 0.3;
|
||||||
|
-webkit-transform: scale(0.4);
|
||||||
|
transform: scale(0.4); }
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1); } }
|
||||||
|
|
||||||
|
@keyframes ball-spin-fade-loader {
|
||||||
|
50% {
|
||||||
|
opacity: 0.3;
|
||||||
|
-webkit-transform: scale(0.4);
|
||||||
|
transform: scale(0.4); }
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1); } }
|
||||||
|
|
||||||
|
.ball-spin-fade-loader {
|
||||||
|
position: relative; }
|
||||||
|
.ball-spin-fade-loader > div:nth-child(1) {
|
||||||
|
top: 25px;
|
||||||
|
left: 0;
|
||||||
|
-webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
|
||||||
|
animation: ball-spin-fade-loader 1s 0s infinite linear; }
|
||||||
|
.ball-spin-fade-loader > div:nth-child(2) {
|
||||||
|
top: 17.04545px;
|
||||||
|
left: 17.04545px;
|
||||||
|
-webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
|
||||||
|
animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
|
||||||
|
.ball-spin-fade-loader > div:nth-child(3) {
|
||||||
|
top: 0;
|
||||||
|
left: 25px;
|
||||||
|
-webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
|
||||||
|
animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
|
||||||
|
.ball-spin-fade-loader > div:nth-child(4) {
|
||||||
|
top: -17.04545px;
|
||||||
|
left: 17.04545px;
|
||||||
|
-webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
|
||||||
|
animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
|
||||||
|
.ball-spin-fade-loader > div:nth-child(5) {
|
||||||
|
top: -25px;
|
||||||
|
left: 0;
|
||||||
|
-webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
|
||||||
|
animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
|
||||||
|
.ball-spin-fade-loader > div:nth-child(6) {
|
||||||
|
top: -17.04545px;
|
||||||
|
left: -17.04545px;
|
||||||
|
-webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
|
||||||
|
animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
|
||||||
|
.ball-spin-fade-loader > div:nth-child(7) {
|
||||||
|
top: 0;
|
||||||
|
left: -25px;
|
||||||
|
-webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
|
||||||
|
animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
|
||||||
|
.ball-spin-fade-loader > div:nth-child(8) {
|
||||||
|
top: 17.04545px;
|
||||||
|
left: -17.04545px;
|
||||||
|
-webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
|
||||||
|
animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
|
||||||
|
.ball-spin-fade-loader > div {
|
||||||
|
/*background-color: #279fcf;*/
|
||||||
|
background-color:#0abcdf;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 100%;
|
||||||
|
margin: 2px;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
position: absolute; }
|
||||||
</style>
|
</style>
|
||||||
<script>
|
|
||||||
var count = 0;
|
|
||||||
function rotate() {
|
|
||||||
var elem2 = document.getElementById('div2');
|
|
||||||
elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
|
|
||||||
elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
|
|
||||||
if (count==360) { count = 0 }
|
|
||||||
count+=45;
|
|
||||||
window.setTimeout(rotate, 100);
|
|
||||||
}
|
|
||||||
window.setTimeout(rotate, 100);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="div2">
|
<div class="icon-cont">
|
||||||
<div class="bar1"></div>
|
<div class="loader">
|
||||||
<div class="bar2"></div>
|
<div class="loader-inner ball-spin-fade-loader">
|
||||||
<div class="bar3"></div>
|
<div></div>
|
||||||
<div class="bar4"></div>
|
<div></div>
|
||||||
<div class="bar5"></div>
|
<div></div>
|
||||||
<div class="bar6"></div>
|
<div></div>
|
||||||
<div class="bar7"></div>
|
<div></div>
|
||||||
<div class="bar8"></div>
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text" style="font-size:24px">正在为您加载，请稍候...</div>
|
<div class="text" style="font-size:24px;position: relative;">
|
||||||
|
<p>正在为您加载，请稍候...</p>
|
||||||
|
<!--<hr style="width:300px;margin:30px auto 10px;border-bottom:1px solid #77839b;border-top:1px solid #1f2228"/>-->
|
||||||
|
</div>
|
||||||
|
<h5 class="hder footer">坤腾畅联</h5>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user