css3-animation
/
loading.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_796951_4eqqctw5fwu.css"/>
		<title>加载中...</title>
		<style type="text/css">
			body{
			}
			.load_box{
			text-align: center;
			position: relative;
			top: 400px;
			}
			.load_sun{
				font-size: 80px;
				display: inline-block;
				animation: load_sun 2.7s linear infinite;
				color: #f4ea29;
			}
			@keyframes load_sun{
				0%{
					transform:translateY(0px) rotate(0);
				}
				20%{
					transform:translateY(5px) rotate(20deg);
				}
				40%{
					transform:translateY(10px) rotate(60deg);
				}
				60%{
					transform:translateY(5px) rotate(40deg);
				}
				80%{
					transform:translateY(0px) rotate(20deg);
				}
				100%{
					transform:translateY(0px) rotate(0);
				}
			}
			.load_text{
				color: #f4ea29;
				font-size: 16px;
				animation: load_text 2.7s ease-in-out infinite;
			}
			@keyframes load_text{
				0%{
					opacity: 1;
				}
				40%{
					opacity: 0.4;
				}
				60%{
					opacity: 0.1;

				}
				80%{
					opacity: 1;
				}
			}
		</style>
	</head>
	<body>
		<div class="load_box">
			<i class="iconfont icon-taiyang load_sun"></i>
			<p class="load_text">loading...</p>
		</div>

	</body>
</html>