<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超酷jQuery+CSS3翻页时钟动画 - 网页模板</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<main>
<div style="display:none">
<div id="top-test-anim" class="num-anim top-anim" style="display:none;">
<div class="top-half-num">2</div>
</div>
<div id="bottom-test-anim" class="num-anim bottom-anim" style="display:none;">
<div class="bottom-half-num">
<div class="dropper">3</div></div>
</div>
</div>
<canvas id="my-canvas"></canvas>
<div id="clock">
<div class="time-container hours">
<div class="digit">
<div class="fade"> </div>
<span class="num top" id="hour-tens-top">1</span>
<span class="num bottom" id="hour-tens-bottom">
<div class="bottom-container">1</div></span>
<div class="swapper">
<div id="top-hour-tens-anim" class="num-anim top-anim" style="display:none;">
<div class="top-half-num">8</div>
</div>
<div id="bottom-hour-tens-anim" class="num-anim bottom-anim" style="display:none;">
<div class="bottom-half-num">
<div class="dropper">9</div></div>
</div>
</div>
<div class="ring ring-left"></div>
<div class="ring ring-right"></div>
</div>
<div class="digit">
<div class="fade"> </div>
<span class="num top" id="hour-ones-top">3</span>
<span class="num bottom" id="hour-ones-bottom">
<div class="bottom-container">3</div></span>
<div class="swapper">
<div id="top-hour-ones-anim" class="num-anim top-anim" style="display:none;">
<div class="top-half-num">8</div>
</div>
<div id="bottom-hour-ones-anim" class="num-anim bottom-anim" style="display:none;">
<div class="bottom-half-num">
<div class="dropper">9</div></div>
</div>
</div>
<div class="ring ring-left"></div>
<div class="ring ring-right"></div>
</div>
</div>
<div class="time-container minutes">
<div class="digit">
<div class="fade"> </div>
<span class="num top" id="minute-tens-top">4</span>
<span class="num bottom" id="minute-tens-bottom">
<div class="bottom-container">4</div></span>
<div class="swapper">
<div id="top-minute-tens-anim" class="num-anim top-anim" style="display:none;">
<div class="top-half-num">8</div>
</div>
<div id="bottom-minute-tens-anim" class="num-anim bottom-anim" style="display:none;">
<div class="bottom-half-num">
<div class="dropper">9</div></div>
</div>
</div>
<div class="ring ring-left"></div>
<div class="ring ring-right"></div>
</div>
<div class="digit">
<div class="fade"> </div>
<span class="num top" id="minute-ones-top">3</span>
<span class="num bottom" id="minute-ones-bottom">
<div class="bottom-container">3</div></span>
<div class="swapper">
<div id="top-minute-ones-anim" class="num-anim top-anim" style="display:none;">
<div class="top-half-num">8</div>
</div>
<div id="bottom-minute-ones-anim" class="num-anim bottom-anim" style="display:none;">
<div class="bottom-half-num">
<div class="dropper">9</div></div>
</div>
</div>
<div class="ring ring-left"></div>
<div class="ring ring-right"></div>
</div>
</div>
<div class="time-container seconds">
<div class="digit">
<div class="fade"> </div>
<span class="num top" id="second-tens-top">5</span>
<span class="num bottom" id="second-tens-bottom">
<div class="bottom-container">5</div></span>
<div class="swapper">
<div id="top-second-tens-anim" class="num-anim top-anim" style="display:none;">
<div class="top-half-num">8</div>
</div>
<div id="bottom-second-tens-anim" class="num-anim bottom-anim" style="display:none;">
<div class="bottom-half-num">
<div class="dropper">9</div></div>
</div>
</div>
<div class="ring ring-left"></div>
<div class="ring ring-right"></div>
</div>
<div class="digit">
<div class="fade"> </div>
<span class="num top" id="second-ones-top">3</span>
<span class="num bottom" id="second-ones-bottom">
<div class="bottom-container">2</div></span>
<div class="swapper">
<div id="top-second-ones-anim" class="num-anim top-anim" style="display:none;">
<div class="top-half-num">2</div>
</div>
<div id="bottom-second-ones-anim" class="num-anim bottom-anim" style="display:none;">
<div class="bottom-half-num">
<div class="dropper">3</div></div>
</div>
</div>
<div class="ring ring-left"></div>
<div class="ring ring-right"></div>
</div>
</div>
</div>
</main>
<script src='js/jquery.js'></script>
<script src="js/index.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
