基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效
今天给大家分享一款效果非常炫酷的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炫酷蹦床式图片切换特效的更多相关文章
- 基于css3炫酷页面加载动画特效代码
基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- 12种炫酷HTML5 SVG和CSS3表单浮动标签特效
这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...
- 基于HTML5 SVG炫酷文字爆炸特效
这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.该文字特效用SVG path属性将文字路径切割为很多小块,然后使用css3和js在鼠标滑过文字时制作文字爆炸分裂的炫酷效果. 在线 ...
- 12种超酷HTML5 SVG和CSS3浮动标签效果
这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...
- 9款基于HTML5/SVG/Canvas的折线图表应用
1.华丽的HTML5图表 可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势 ...
- html5跟随鼠标炫酷网站引导页动画特效
html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- 为你的WordPress博客添加CSS3炫酷读者墙
为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...
- js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
随机推荐
- VC 线程间通信的三种方式
1.使用全局变量(窗体不适用) 实现线程间通信的方法有很多,常用的主要是通过全局变量.自定义消息和事件对象等来实现的.其中又以对全局变量的使用最为简洁.该方法将全局变量作为线程监视的对象,并通 ...
- TCP Socket 粘包
这两天看csdn有一些关于socket粘包,socket缓冲区设置的问题.发现自己不是非常清楚,所以查资料了解记录一下: 一两个简单概念长连接与短连接: 1.长连接 Client方与Server ...
- Coding.net+Myeclipse 2014 Git配置
安装Git,然后 $ssh-keygen -t rsa -b 4096 -C "your_email@example.com" # Creates a new ssh key, u ...
- Android中的Service使用
Service的生命周期 (适用于2.1及以上) 1. 被startService的无论是否有任何活动绑定到该Service,都在后台运行.onCreate(若需要) -> onStart(in ...
- 用PowerDesigner对现有的数据库反向工程建立E-R图
由于早期的一个项目在数据库设计建立时没有输出为E-R图,偶在对此项目进行二次改造升级时则使用了PD对原有的数据库进行反向工程,即根据数据源将数据库的的所有表生成为E-R图结构,我使用的是PD 15,反 ...
- 数据库分析函数 ROW_NUMBER() rank() dense_rank() 的区别 first_value(D) , last_value(D)
直接上图 select * from tab select B,ROW_NUMBER()over(order by B) from tab 当碰到相同数据时,排名按照记录集中记录的顺序依次递增. 遇 ...
- go 学习 ---package
1.包简述 GO本身没有项目的概念,只有包,包括可执行包和不可执行包,而不管什么包,都应该包含在 $GOPATH/src 目录下,GO命令和编译器会在 $GOPATH/src 目录下搜索相应的包.比如 ...
- Unix环境高级编程(十六)进程间通信
进程间通信(IPC)是指能在两个进程间进行数据交换的机制.现代OS都对进程有保护机制,因此两个进程不能直接交换数据,必须通过一定机制来完成. IPC的机制的作用: (1)一个软件也能更容易跟第三方软件 ...
- 在Debug模式下中断, 在Release模式下跳出当前函数的断言
在Debug模式下中断, 在Release模式下跳出当前函数的断言 #ifdef DEBUG #define __breakPoint_on_debug asm("int3") # ...
- CentOS7 安装配置DNS服务器
一.安装 yum install bind 二.配置 1. /etc/named.conf // // named.conf // // Provided by Red Hat bind packag ...