community_notfound.html

<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    
		<meta charset="utf-8">
		<title>页面加载错误，刷新重试</title>
	</head>
	<style>
		body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			text-align: center;
			vertical-align: center;
			background-color: #fff;
		}
		.wifi-symbol {
			display: none;
		}
		.wifi-symbol [foo],
		.wifi-symbol {
			display: block;
			position: absolute;
			top: 20%;
			display: inline-block;
			width: 150px;
			height: 150px;
			position: absolute;
			left: 50%;
			margin-top: -187.5px;
			-ms-transform: rotate(-45deg) translate(-100px);
			-moz-transform: rotate(-45deg) translate(-100px);
			-o-transform: rotate(-45deg) translate(-100px);
			-webkit-transform: rotate(-45deg) translate(-100px);
			transform: rotate(-45deg) translate(-100px);
		}
		.wifi-symbol .wifi-circle {
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			display: block;
			width: 100%;
			height: 100%;
			font-size: 21.42857px;
			position: absolute;
			bottom: 0;
			left: 0;
			border-color: #000;
			border-style: solid;
			border-width: 1em 1em 0 0;
			-webkit-border-radius: 0 100% 0 0;
			border-radius: 0 100% 0 0;
			opacity: 1;
			-o-animation: wifianimation 2s infinite;
			-moz-animation: wifianimation 2s infinite;
			-webkit-animation: wifianimation 2s infinite;
			animation: wifianimation 2s infinite;
		}
		.wifi-symbol .wifi-circle.first {
			-o-animation-delay: 800ms;
			-moz-animation-delay: 800ms;
			-webkit-animation-delay: 800ms;
			animation-delay: 800ms;
		}
		.wifi-symbol .wifi-circle.second {
			width: 5em;
			height: 5em;
			-o-animation-delay: 400ms;
			-moz-animation-delay: 400ms;
			-webkit-animation-delay: 400ms;
			animation-delay: 400ms;
		}
		.wifi-symbol .wifi-circle.third {
			width: 3em;
			height: 3em;
			-o-animation-delay: 200ms;
			-moz-animation-delay: 200ms;
			-webkit-animation-delay: 200ms;
			animation-delay: 200ms;
		}
		.wifi-symbol .wifi-circle.fourth {
			width: 1em;
			height: 1em;
			opacity: 1;
			background-color: #FFFFCC;
		}
		@-o-keyframes wifianimation {
			0% {
				opacity: 0.4;
			}
			5% {
				opactiy: 1;
			}
			6% {
				opactiy: 0.1;
			}
			100% {
				opactiy: 0.1;
			}
		}
		@-moz-keyframes wifianimation {
			0% {
				opacity: 0.4;
			}
			5% {
				opactiy: 1;
			}
			6% {
				opactiy: 0.1;
			}
			100% {
				opactiy: 0.1;
			}
		}
		@-webkit-keyframes wifianimation {
			0% {
				opacity: 0.4;
			}
			5% {
				opactiy: 1;
			}
			6% {
				opactiy: 0.1;
			}
			100% {
				opactiy: 0.1;
			}
		}
		.notfound_text {
			position: absolute;
			top: 150px;
			width: 100%;
			text-align: center;
			font-size: 1.3em;
			opacity: 1;
			color: #000;
		}
		.notfound_text div {
			width: 80%;
			position: relative;
			left: 10%;
			color: #999;
			font-size: 0.8em;
		}
		.notfound_text font {
			color: #17b6ff;
		}
		.wifi{
			width: 100%;
			text-align: center;
			position: absolute;
			top: 80px;
		}
	</style>

	<body>
		<div class="wifi">
		<div class="wifi-symbol">
			<div class="wifi-circle second"></div>
			<div class="wifi-circle third"></div>
			<div class="wifi-circle fourth">
			</div>

		</div>
		</div>
		<div class="notfound_text">
			<h3>出错了，无法打开网页</h3>
			<div>网络信号弱、不稳定或者安全软件禁止访问网络。</br>你可在网络好时或关闭安全软件再重新加载该网页。</div>
			<br />
			<font onclick="window.location.href=window.location.href;">重新加载</font>
		</div>
	</body>

</html>