OpenWrt/apfree_wifidog
1
0
Fork 0
mirror of https://github.com/liudf0716/apfree_wifidog.git synced 2025-01-07 03:16:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update wifidog-redir.html.front

Browse Source
This commit is contained in:
Dengfeng Liu 2016-11-25 13:29:53 +08:00 committed by GitHub
parent 07bac2b5f4
commit 11723199b8
1 changed files with 155 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

242
wifidog-redir.html.front
View File

@ -2,107 +2,175 @@
<html>
<head>
<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>
<style>
/* general styling */
body {
text-align: center;
body{
background-color:#1f2228;
}
.bar1 {
-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;
.icon-cont{
width:100px;
height:100px;
margin:25px auto;
-moz-border-radius: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;
margin:160px auto 50px;
padding-left:100px;
}
#div2 div
{
width:10px;
height:30px;
background:#000;
position:absolute;
top:35px;
left:45px;
.hder{
font-family: "Microsoft YaHei";
font-weight:normal;
color:#77839b;
/*background: linear-gradient(#444, #222);*/
padding:10px 0;
text-align:center;
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 {
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
.footer{
position: fixed;
bottom:20px;
text-align:center;
width:100%;
font-size:16px;
}
/* uncomment this to use css animation in webkit browsers */
/* @-webkit-keyframes rotateThis {
from {-webkit-transform:scale(0.5) rotate(0deg);}
to {-webkit-transform:scale(0.5) rotate(360deg);}
} */
.text{ display: block; text-align: center;}
.text{
font-size:18px;
text-align:center;
font-family: "Microsoft YaHei";
color:#0abcdf;
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>
<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>
<body>
<div id="div2">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="icon-cont">
<div class="loader">
<div class="loader-inner ball-spin-fade-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<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>
<script type="text/javascript">