index.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,width=device-width" />
<title>70周年</title>
<meta name="description" content="">
<meta name="keywords" content="" />
<link id="common_css" rel="stylesheet" href="css/style.css">
<script src="js/viewport.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
body {
	font-family: "microsoft yahei";
}
img {
	display: block;
}
.wrap {
	height: 100%;
	width: 640px;
	margin: 0 auto;
	background: #c03430;
	position: relative;
	animation:opc 3s ease-in 1s backwards;
	-webkit-animation:opc 3s ease-in 1s backwards;
	overflow:hidden
}
.yanhua1 {
	border-radius:50%;
	position: absolute;
	width: 250px;
	height: 250px;
	background: linear-gradient(rgba(115,197,251,1), rgba(115,197,251,1)), url(images/hua1.png) no-repeat center center;
	background: -webkit-linear-gradient(rgba(115,197,251,1),rgba(115,197,251,1)), url(images/hua1.png) no-repeat center center;
	background-size: 100% 100%,100% 100%;
	top: 50px;
	left: 45px;
	z-index: 1;
	animation: yanhua 3s ease-out infinite 8s backwards,yanse1 3s ease-out  infinite 8s backwards,touming 3s ease-out infinite 8s backwards;
	-webkit-animation: yanhua 3s ease-out infinite 8s backwards,yanse1 3s ease-out infinite 8s backwards,touming 3s ease-out infinite 8s backwards;
	box-shadow:0 0 20px rgba(115,197,251,1);
}
.yanhua2 {
	border-radius:50%;
	position: absolute;
	width: 330px;
	height: 330px;
	background: linear-gradient(rgba(245,231,210,1),rgba(245,231,210,1)), url(images/hua2.png) no-repeat center center;
	background: -webkit-linear-gradient(rgba(245,231,210,1),rgba(245,231,210,1)), url(images/hua2.png) no-repeat center center;
	background-size: 100% 100%,100% 100%;
	top: 230px;
	left: 277px;