<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣誕主題</title>
<link rel='stylesheet' href='http://img1.sycdn.imooc.com//down/566a38a90001f17d00000000.css' />
<script type="text/javascript" src="http://img1.sycdn.imooc.com//down/566a38f000016f0900000000.js"></script>
</head>
<body>
<section class="container">
<!-- 第一幅畫面 -->
<section class="page-a bg-adaptive">
<!-- 男孩 -->
<div class="chs-boy chs-boy-deer"></div>
<!-- 月亮 -->
<div class="moon"></div>
<!-- 云 -->
<div class="cloudy"></div>
<!-- 圣誕樹 -->
<figure class="tree"></figure>
<!-- 星星 -->
<svg viewBox="0 0 512 486">
<defs>
<linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FCF0BC"></stop>
<stop offset="0%" stop-color="#FCF0BC"></stop>
</linearGradient>
</defs>
<polygon style="fill: url(#star);" points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
<!-- 窗戶 -->
<div class="window wood">
<div class="window-bg"></div>
<div class="window-content">
<div class="window-left"></div>
<div class="window-right"></div>
</div>
</div>
</section>
<!-- 第二幅畫面 -->
<section class="page-b bg-adaptive">
<!-- 貓 -->
<figure class="cat"></figure>
<!-- 小女孩 -->
<figure class="girl"></figure>
<!-- 圣誕男孩 -->
<figure class="christmas-boy-head"></figure>
<figure class="christmas-boy boy-walk"> </figure>
<!-- 旋轉木馬 -->
<div id="carousel">
<figure id="spinner"></figure>
</div>
</section>
<!-- 第三幅畫面 -->
<section class="page-c bg-adaptive">
<!-- 月亮 -->
<div class="moon"></div>
<!-- 云 -->
<div class="cloudy"></div>
<!-- 星星 -->
<svg viewBox="0 0 512 486">
<defs>
<linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FCF0BC"></stop>
<stop offset="0%" stop-color="#FCF0BC"></stop>
</linearGradient>
</defs>
<polygon style="fill: url(#star);" points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
<!-- 圣誕樹 -->
<figure class="tree treefix"></figure>
<!-- 鹿 -->
<figure class="deer"></figure>
<!-- 窗戶關閉 -->
<div class="window wood">
<!-- <div class="window-bg"></div> -->
<div class="window-content" data-attr="red">
<div class="window-scene-bg"></div>
<div class="window-close-bg"></div>
<div class="window-left hover"></div>
<div class="window-right hover"></div>
</div>
</div>
<!-- 雪花 -->
<canvas id="snowflake" style="position:absolute;z-index:999;"></canvas>
</section>
</section>
</body>
</html>
