加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
authserver-offline.html 5.65 KB
一键复制 编辑 原始数据 按行查看 历史
liudengfeng 提交于 2018-10-20 15:17 . Update authserver-offline.html
<!DOCTYPE html>
<html>
<head>
<title>Auth Server Offline</title>
<meta http-equiv="pragma" content="no-cache" />
<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]>-->
<style class="cp-pen-styles">
body{
/*color: #f54f59;*/
/*background-color:#585656;*/
/*color:#0abcdf;*/
background-color:#1f2228;
color:#fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 1.8rem;
font-weight: 300;
/*background: -webkit-linear-gradient(#fff, #ccc);*/
/*background: linear-gradient(#fff, #ccc);*/
height:100%;
overflow: hidden;
}
.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;
}
.center{
text-align: center;
margin-top:320px;
}
.circle{
position:absolute;
border:0.3rem solid #FFF;
width:80px;
height:80px;
border-radius:50px ;
margin:1.4rem auto;
}
.circle span{
width:100%;
height:100%;
line-height: 78px;
font-size:60px;
}
.header{
width:100%;
font-size: 2rem;
font-weight: 700;
margin:10px auto;
/*text-shadow:0 3px 0px #404853, 0 4px 0px #333333;*/
}
.error{
width:100%;
font-family: "Microsoft YaHei";
margin: 0 auto;
font-size: 1.6rem;
/*text-shadow:0 3px 0px #404853, 0 4px 0px #333333;*/
font-weight: 100;
}
.wrap {
top: 160px;
margin-left: -70px;
position: absolute;
width: 100%;
}
.red{left: 70px;}
.ball,.shadow {
border-radius:100%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.ball {
-webkit-animation: ball 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
animation: ball 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
height: 80px;
width: 80px;
text-align: center;
line-height: 80px;
font-size: 50px;
color:#f8dddd;
}
/*#e55 #b00*/
.red .ball{
background: -webkit-gradient(linear, left top, left bottom, from(#0abcdf), to(#2573fe));
background: -webkit-linear-gradient(#0abcdf, #2573fe);
background: linear-gradient(#0abcdf, #2573fe);
}
.shadow {
-webkit-animation: shadow 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
animation: shadow 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
background: #000;
bottom: -160px;
height: 25px;
width: 75px;
}
.red .ball,.red .shadow { -webkit-animation-delay: -200ms; animation-delay: -200ms; }
@-webkit-keyframes ball {
0% {
-webkit-transform: translateY( 0 );
transform: translateY( 0 );
}
100% {
-webkit-transform: translateY( -80px );
transform: translateY( -80px );
}
}
@keyframes ball {
0% {
-webkit-transform: translateY( 0 );
transform: translateY( 0 );
}
100% {
-webkit-transform: translateY( -80px );
transform: translateY( -80px );
}
}
@-webkit-keyframes shadow {
0% {
opacity: 0.2;
-webkit-transform: scale( 0.75 );
transform: scale( 0.75 );
}
100% {
opacity: 0.05;
-webkit-transform: scale( 1 );
transform: scale( 1 );
}
}
@keyframes shadow {
0% {
opacity: 0.2;
-webkit-transform: scale( 0.75 );
transform: scale( 0.75 );
}
100% {
opacity: 0.05;
-webkit-transform: scale( 1 );
transform: scale( 1 );
}
}
</style>
</head>
<body>
<div class="wrap red">
<div class="shadow"></div>
<div class="ball">!</div>
</div>
<section class="center">
<!--<div class="wrap red">-->
<!--<div class="shadow circle">-->
<!--<span>!</span>-->
<!--</div>-->
<!--<div class="ball"></div>-->
<!--</div>-->
<article>
<h1 class="header">
Auth Server
</h1>
<p class="error">
Offline
</p>
<hr style="width:200px;margin:30px auto 10px;border-bottom:1px solid #3e4042;"/>
<h5 class="hder">www.kunteng.org.cn</h5>
</article>
</section>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化