标签:cti javascrip java char bezier 结束 html 一个人 xhtml 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML(svg)之弹性摇晃页面切换特效</title> <link rel="stylesheet" type="text/css" href="http://files.cnblogs.com/files/caidupingblogs/normalize.css" /> <link rel="stylesheet" type="text/css" href="http://files.cnblogs.com/files/caidupingblogs/demo.css" /> <!--必要样式--> <link rel="stylesheet" type="text/css" href="http://files.cnblogs.com/files/caidupingblogs/slideshow.css" /> <script src="http://files.cnblogs.com/files/caidupingblogs/snap.svg-min.js"></script> <script src="http://files.cnblogs.com/files/caidupingblogs/modernizr.custom.js"></script> </head> <body> <div class="container"> <div id="slideshow" class="slideshow"> <ul> <li> <div class="slide"> <h1>演示(可用键盘"←"和"→"操作)</h1> </div> </li> <li> <div class="slide"> <blockquote> <p>世间没有一种具有真正价值的东西,可以不经过艰苦辛勤的劳动而能够得到的。</p> </blockquote> <p>爱迪生</p> </div> </li> <li> <div class="slide"> <blockquote> <p>我们感觉走到了尽头,其实只是心走到了尽头。再深的绝望,都是一个过程,总有结束的时候,回避始终不是办法。鼓起勇气昂然向前,或许机遇就在下一秒。</p> </blockquote> <p>余秋雨</p> </div> </li> <li> <div class="slide"> <blockquote> <p>我不去想是否能够成功,既然选择了远方,便只顾风雨兼程。</p> </blockquote> <p>汪国真</p> </div> </li> <li> <div class="slide"> <blockquote> <p>一滴水只有放进大海里才永远不会干涸,一个人只有当他把自己和集体事业融合在一起的时候才能最有力量。</blockquote> <p>雷锋</p> </div> </li> <li> <div class="slide"> <blockquote> <p>业精于勤,荒于嬉;行成于思,毁于随。</blockquote> <p>韩愈</p> </div> </li> </ul> </div> </div><!-- /container --> <script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/classie.js"></script> <script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/sliderFx.js"></script> <script type="text/javascript"> (function(){ new SliderFx( document.getElementById(‘slideshow‘), { easing : ‘cubic-bezier(.8,0,.2,1)‘ }); })(); </script> </body> </html>
HTML(svg)之弹性摇晃页面切换特效
原文地址:http://www.cnblogs.com/caidupingblogs/p/6100271.html