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

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

在线预览   源码下载

HTML结构

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

<div class="stack"> <ul id="elasticstack" class="stack__images">  <li><img src='/images/loading.gif' data-original="img/1.jpg" /></li>  <li><img src='/images/loading.gif' data-original="img/2.png" /></li>  <li><img src='/images/loading.gif' data-original="img/3.jpg" /></li>  <li><img src='/images/loading.gif' data-original="img/4.jpg" /></li>  <li><img src='/images/loading.gif' data-original="img/5.png" /></li>  <li><img src='/images/loading.gif' data-original="img/6.png" /></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 --> 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

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

关键词：HTML