标签：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>页面切换效果</title>
<link rel="" href="">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/multilevel.css">
<link rel="stylesheet" type="text/css" href="css/component.css">
<link rel="stylesheet" type="text/css" href="css/animation.css">
<script src="js/moderniz.custom.js"></script>
<link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
<script src="js/min.js"></script>
<script src = "init.js"></script>
</head>
<body>
<div id = "pt-trigers">
<button id = "iterateEffects" class="pt-touch-button"></button>
<div id = "d1-menu" class = "d1-menuwrapper">
<button id = "d1-trigger">选择切换效果</button>
<ul class = "d1-menu">
<li>
<a href="#">Move</a>
<ul class = "d1-submenu">
<li data-animation = "1"><a href="#">Move to left/from right</a></li>
<li data-animation="2"><a href = "#">Move to right/from left</a></li>
<li data-animation="3"><a href = "#">Move to buttom/from top</a></li>
<li data-animation="4"><a href="#">Move to top/from bottom</a></li>
</ul>
</li>
<li>
<a href = "#">Fade</a>
<ul class="d1-submenu">
<li data-animation="5"><a href="#">Fade / from left</a></li>
<li data-animation="6"><a href="#">Fade / from right</a></li>
<li data-animation="7"><a href="#">Fade / from top</a></li>
<li data-animation="8"><a href="#">Fade / from bottom</a></li>
<li data-animation="9"><a href="#">Fade left/Fade right</a></li>
<li data-animation="10"><a href="#">Fade right/Fade left</a></li>
<li data-animation="11"><a href="#">Fade top/Fade bottom</a></li>
<li data-animation="12"><a href="#">Fade bottom/Fade top</a></li>
</ul>
</li>
<li>
<a href = "#">Different easing</a>
<ul class="d1-submenu">
<li data-animation="13"><a href="#">Different easing / from right</a></li>
<li data-animation="14"><a href="#">Different easing / from left</a></li>
<li data-animation="15"><a href="#">Different easing / from bottom</a></li>
<li data-animation="16"><a href="#">Different easing / form top</a></li>
</ul>
</li>
<li>
<a href="#">Scale</a>
<ul class="d1-submenu">
<li data-animation="17"><a href = "#">Scale down / from right</a></li>
<li data-animation="18"><a href = "#">Scale down / from left</a></li>
<li data-animation="19"><a href = "#">Scale down / from bottom</a></li>
<li data-animation="20"><a href = "#">Scale down / from top</a></li>
<li data-animation="21"><a href = "#">Scale down / scale down</a></li>
<li data-animation="22"><a href = "#">Scale up / scale up</a></li>
<li data-animation="23"><a href = "#">Move to left / scale up</a></li>
<li data-animation="24"><a href = "#">Move to right / scale up</a></li>
<li data-animation="25"><a href = "#">Move to bottom / scale up</a></li>
<li data-animation="26"><a href = "#">Move to top / scale up</a></li>
<li data-animation="27"><a href = "#">Scale down/scale up</a></li>
</ul>
</li>
<li>
<a href="#">Rotate</a>
<ul class="d1-submenu">
<li data-animation="28"><a href="#">Glue left / from right</a></li>
<li data-animation="29"><a href="#">Glue right / from left</a></li>
<li data-animation="30"><a href="#">Glue bottom / from top</a></li>
<li data-animation="31"><a href="#">Glue top / from bottom</a></li>
</ul>
</li>
<li>
<a href="#">Flip</a>
<ul class="d1-submenu">
<li data-animation="32"><a href="#">Flip right</a></li>
<li data-animation="33"><a href="#">Flip left</a></li>
<li data-animation="34"><a href="#">Flip top</a></li>
<li data-animation="35"><a href="#">Flip bottom</a></li>
</ul>
</li>
<li data-animation="36"><a href = "#">Fall</a></li>
<li data-animation="37"><a href="#">Newspaper</a></li>
<li>
<a href="#">Push/Pull</a>
<ul class="d1-submenu">
<li data-animation="38"><a href="#">Push right / from left</a></li>
<li data-animation="39"><a href="#">Push left / from right</a></li>
<li data-animation="40"><a href="#">Push bottom / from top</a></li>
<li data-animation="41"><a href="#">Push top / from bottom</a></li>
<li data-animation="42"><a href="#">Push right / pull left</a></li>
<li data-animation="43"><a href="#">Push left / pull right</a></li>
<li data-animation="44"><a href="#">Push bottom / pull top</a></li>
<li data-animation="45"><a href="#">Push top / pull bottom</a></li>
</ul>
</li>
<li>
<a href="#">Fold/Unfold</a>
<ul class="d1-submenu">
<li data-animation="46"><a href="#">Fold left / from right</a></li>
<li data-animation="47"><a href="#">Fold right / from left</a></li>
<li data-animation="48"><a href="#">Fold bottom/ from top</a></li>
<li data-animation="49"><a href="#">Fold top / from bottom</a></li>
<li data-animation="50"><a href="#">Move to right / unfold left</a></li>
<li data-animation="51"><a href="#">Move to left / from right</a></li>
<li data-animation="52"><a href="#">Move to bottom / from top</a></li>
<li data-animation="53"><a href="#">Move to top / from bottom</a></li>
</ul>
</li>
<li>
<a href = "#">Room</a>
<ul class="d1-submenu">
<li data-animation="54"><a href="#">Room to left</a></li>
<li data-animation="55"><a href="#">Room to right</a></li>
<li data-animation="56"><a href="#">Room to bottom</a></li>
<li data-animation="57"><a href="#">Room to top</a></li>
</ul>
</li>
<li>
<a href="#">Cube</a>
<ul class="d1-submenu">
<li data-animation="58"><a href="#">Cube to left</a></li>
<li data-animation="59"><a href="#">Cube to right</a></li>
<li data-animation="60"><a href="#">Cube to bottom</a></li>
<li data-animation="61"><a href="#">Cube to top</a></li>
</ul>
</li>
<li>
<a href="#">Carousel</a>
<ul>
<li data-animation="62"><a href="#">Carousel to left</a></li>
<li data-animation="63"><a href="#">Carousel to right</a></li>
<li data-animation="64"><a href="#">Carousel to bottom</a></li>
<li data-animation="65"><a href="#">Carousel to top</a></li>
</ul>
</li>
<li data-animation="66"><a href="#">Sides</a></li>
<li data-animation="67"><a href="#">Slide</a></li>
</ul>
<div class="footer-banner" style="width:728px;margin: 30px auto;position: absolute;bottom: -350px;left: -200px">
</div>
</div>
</div>
<div id = "pt-main" class="pt-perspective">
<div class="pt-page pt-page1"><h1><span>A collection of</span>页面切换效果</h1></div>
<div class="pt-page pt-page2"><h1><span>A collection of</span>页面切换效果</h1></div>
<div class="pt-page pt-page3"><h1><span>A collection of</span>页面切换效果</h1></div>
<div class="pt-page pt-page4"><h1><span>A collection of</span>页面切换效果</h1></div>
<div class="pt-page pt-page5"><h1><span>A collection of</span>页面切换效果</h1></div>
<div class="pt-page pt-page6"><h1><span>A collection of</span>页面切换效果</h1></div>
</div>
<div class="pt-massage">
<p>亲，你的浏览器不支持 CSS 动画，请使用 Chrome,Firefox,Safari 等浏览器浏览.</p>
</div>
<script src = "js/jquery.d1menu.js"></script>
<script src = "js/pagetransitions.js"></script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/whatcanido/p/5143795.html
