码迷,mamicode.com
首页 > Web开发 > 详细

基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效

时间:2015-03-18 10:23:08      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件。该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意。效果图如下:

技术分享

在线预览   源码下载

HTML结构

该图片切换特效的HTML结构中,第一个元素是SVG图形,当切换图片时,它将从一个规则的矩形变为一个被压缩的矩形。

<div class="stack">
  <ul id="elasticstack" class="stack__images">
    <li><img src="img/1.jpg" alt="01"/></li>
    <li><img src="img/2.png" alt="02"/></li>
    <li><img src="img/3.jpg" alt="03"/></li>
    <li><img src="img/4.jpg" alt="04"/></li>
    <li><img src="img/5.png" alt="05"/></li>
    <li><img src="img/6.png" alt="06"/></li>
  </ul>
  <button id="stack-next" class="stack__next"><i class="icon icon-down"></i><span>Next</span></button>
  <ul id="stack-titles" class="stack__titles">
    <li class="current">
      <blockquote>
        <p>"Once you have eliminated the impossible, whatever remains, however improbable, must be the truth."</p>
        <footer><a href="#">#RIPLeonardNimoy</a> by James Olstein</footer>
      </blockquote>
    </li>
    <li>
      <blockquote>
        <p>"The needs of the many outweigh the needs of the few, or the one."</p>
        <footer><a href="#">Mr. Spock</a> by Mustafa Kural</footer>
      </blockquote>
    </li>
    <li>
      <blockquote>
        <p>"Insufficient facts always invite danger."</p>
        <footer><a href="#">LLAP</a> by Sarah McKay</footer>
      </blockquote>
    </li>
    <li>
      <blockquote>
        <p>"Without followers, evil cannot spread."</p>
        <footer><a href="#">RIP Leonard Nimoy</a> by derric</footer>
      </blockquote>
    </li>
    <li>
      <blockquote>
        <p>"Logic is the beginning of wisdom, not the end."</p>
        <footer><a href="#">#Goodnight, Spock</a> by Helen Tseng</footer>
      </blockquote>
    </li>
    <li>
      <blockquote>
        <p>"Change is the essential process of all existence."</p>
        <footer><a href="#">RIP Spock</a> by Sahirul Iman</footer>
      </blockquote>
    </li>
  </ul>
</div><!-- /stack --> 

via:http://www.w2bc.com/Article/27451

基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效

标签:

原文地址:http://www.cnblogs.com/liaohuolin/p/4346217.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!