基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效
2015-03-18 09:00
639 查看
今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件。该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意。效果图如下:
在线预览 源码下载
HTML结构
该图片切换特效的HTML结构中,第一个元素是SVG图形,当切换图片时,它将从一个规则的矩形变为一个被压缩的矩形。
via:http://www.w2bc.com/Article/27451
在线预览 源码下载
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
相关文章推荐
- SVG和CSS3炫酷蹦床式图片切换效果
- 基于HTML5 SVG炫酷文字爆炸特效
- 一款基于css3的3D图片翻页切换特效
- 12种炫酷HTML5 SVG和CSS3表单浮动标签特效
- HTML5 SVG和CSS3炫酷液态菜单按钮特效
- 12种炫酷HTML5 SVG和CSS3表单浮动标签特效
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
- 基于HTML5 SVG炫酷文字爆炸特效
- 基于HTML5/CSS3图片网格动画特效
- 基于HTML5和CSS的焦点图全屏切换的炫酷特效
- 文本框 12种炫酷HTML5 SVG和CSS3表单浮动标签特效
- 一款基于css3的3D图片翻页切换特效
- 淘宝首页 图片滑动切换效果 基于CSS3的transition方法实现
- 一款基于jquery超炫的图片切换特效
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
- 基于HTML5全屏图文左右滑动切换特效
- 基于css3炫酷页面加载动画特效代码
- 9种CSS3炫酷图片展开预览展示动画特效
- 适合移动mobile的css3弹性堆叠图片切换特效
- 10 个基于 jQuery/CSS3 的图片特效