<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣誕主題</title>
<link rel='stylesheet' href='common.css' />
<link rel='stylesheet' href='pageA.css' />
</head>
<body>
<section class="container">
<!-- 第一幅畫面 -->
<section class="page-a bg-adaptive">
<!-- 月亮 -->
<figure class="moon"></figure>
<!-- 圣誕樹 -->
<figure class="tree"></figure>
<!-- 云 -->
<figure class="cloudy"></figure>
</section>
<!-- 第二幅畫面 -->
<section class="page-b bg-adaptive">
</section>
<!-- 第三幅畫面 -->
<section class="page-c bg-adaptive">
</section>
</section>
<script type="text/javascript">
//rem設置
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
//寬與高度
document.body.style.height = clientWidth * (900 / 1440) + "px"
};
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.bg-adaptive {
background-size: 100% 100%;
}
/**
* 背景布置
*/
.container .page-a {
width : 100%;
height : 100%;
background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png");
position: absolute;
z-index: 5;
}
/**
* 圣誕樹
* animation: name duration timing-function delay iteration-count direction;
*/
.tree {
width: 2.71rem;
height: 4.24rem;
z-index: 15;
position: absolute;
bottom: 0;
left: 1rem;
background-image: url(http://img1.sycdn.imooc.com//565d07d30001c97605420424.png);
background-size: 200% 100%;
/*?*/
}
@-webkit-keyframes treeAnim {
0% {
background-position: 0% 100%;
}
100% {
background-position: -200% 100%;
}
}
@-moz-keyframes treeAnim {
0% {
background-position: 0% 100%;
}
100% {
background-position: -200% 100%;
}
}
/*月亮*/
.moon {
background: #FCF0BC;
width: 2rem;
height: 2rem;
border-radius: 50%;
box-shadow: 0 0 1.5rem #FCF0BC;
position: absolute;
left: 3.3rem;
top: .8rem;
-webkit-animation: nucleus 2s infinite linear;
-moz-animation: nucleus 2s infinite linear;
}
/**
* 光暈效果
*/
@-webkit-keyframes nucleus {
0% {
box-shadow: 0 0 0 transparent;
}
50% {
box-shadow: 0 0 1rem #FCF0BC;
}
100% {
box-shadow: 0 0 0 transparent;
}
}
@-moz-keyframes nucleus {
0% {
box-shadow: 0 0 0 transparent;
}
50% {
box-shadow: 0 0 1rem #FCF0BC;
}
100% {
box-shadow: 0 0 0 transparent;
}
}
/*云*/
.cloudy {
background: #60768D;
border-radius: 50%;
box-shadow: #60768D 1.2rem -0.2rem 0 -0.1rem, #60768D 0.5rem -0.5rem, #60768D 0.8rem 0.2rem,#60768D 1.5rem 0.2rem 0 -0.2rem;
height: 1rem;
width: 1rem;
position: absolute;
left: .5rem;
top: 1.8rem;
z-index: 5;
-webkit-animation: cloudy 5s ease-in-out infinite;
-moz-animation: cloudy 5s ease-in-out infinite;
}
@-webkit-keyframes cloudy {
50% {
-webkit-transform: translateY(-0.1rem);
}
}
@-moz-keyframes cloudy {
50% {
-moz-transform: translateY(-0.1rem);
}
}
