<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js和CSS3超炫酷轮播图过渡动画特效</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="loading demo-2">
<main>
<div class="frame">
<div class="frame__title-wrap">
<h1 class="frame__title">Motion Transition Effect</h1>
<p class="frame__tagline">Inspired by <a href="https://dribbble.com/shots/4272534-Ping-Pong-Slow-Motion" target="_blank">Ping Pong Slow Motion</a></p>
</div>
<div class="frame__links">
<a href="https://www.jb51.net/">脚本之家</a>
<a href="https://www.jb51.net/">返回下载页</a>
</div>
<a class="frame__github" href="https://github.com/codrops/MotionTransitionEffect/" target="_blank">GitHub</a>
<div class="frame__demos">
<a href="index.html" class="frame__demo">demo 1</a>
<a href="index2.html" class="frame__demo frame__demo--current">demo 2</a>
</div>
</div>
<div class="deco deco--bg deco--bg-vert"></div>
<div class="deco deco--shape deco--shape-ver deco--shape-1"></div>
<div class="deco deco--shape deco--shape-ver deco--shape-2"></div>
<div class="slideshow">
<div class="slide">
<div class="slide__image" style="background-image:url(img/6.jpg)"></div>
<h2 class="slide__title">Funtastic</h2>
</div>
<div class="slide">
<div class="slide__image slide__image--hidden" style="background-image:url(img/7.jpg)"></div>
<h2 class="slide__title slide__title--hidden">Peacer</h2>
</div>
<div class="slide">
<div class="slide__image slide__image--hidden" style="background-image:url(img/8.jpg)"></div>
<h2 class="slide__title slide__title--hidden">Copperlo</h2>
</div>
<div class="slide">
<div class="slide__image slide__image--hidden" style="background-image:url(img/9.jpg)"></div>
<h2 class="slide__title slide__title--hidden">Moose</h2>
</div>
<div class="slide">
<div class="slide__image slide__image--hidden" style="background-image:url(img/10.jpg)"></div>
<h2 class="slide__title slide__title--hidden">Paradise</h2>
</div>
<nav class="nav">
<button class="nav__button nav__button--previous">Previous</button>
<button class="nav__button nav__button--next">Next</button>
</nav>
</div>
</main>
<script src="js/charming.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/demo2.js"></script>
</body>
</html>
js和CSS3超炫酷轮播图过渡弹性动画特效.zip （20个子文件） 
132689877179248531 js_CSS3_TweenMax css 
base.css 8KB img 
8.jpg 148KB 2.jpg 51KB 1.jpg 38KB 6.jpg 66KB 3.jpg 90KB 5.jpg 47KB
noise2.png 3KB 4.jpg 51KB 10.jpg 43KB 9.jpg 61KB 7.jpg 79KB noise1.png 3KB
index.html 3KB js demo2.js 4KB demo.js 4KB charming.min.js 527B imagesloaded.pkgd.min.js 5KB TweenMax.min.js 112KB index2.html 3KB资源评论
