今天要给大家分享10款精美的HTML5图片轮播/切换动画,这些动画每一个都有自己的特点,不管你是PC端的网页,还是移动端的H5应用,都可以尝试使用这些动画来提高应用的用户体验。
❝PS:请你耐心看完,文末我提供了所有动画的源码打包下载链接,如果你喜欢这些动画,可以按需下载,希望对你有所帮助。
这是一个简约而实用的JS画廊相册组件,它的特点是可以添加无限多张相片,并且支持水平无限循环滑动。另外它还支持对画廊中的相片进行展开和折叠,并同时动态展示相片的标题和描述。这款相册组件主要采用了jQuery插件以及CSS3的过渡动画特性,使用起来十分方便。
这是一个基于TweenMax动画库的图片碎裂切换动画,它的特点是点击图片时,图片就会像玻璃那样碎裂成许多块,然后渐渐地消失,直到下一张图片显示为止。这款图片碎裂动画也可以应用在焦点图的切换动画中,效果非常不错。
Swiper.js是一个流行的移动端轮播图插件,它提供了丰富的功能和配置项。这款图片滑块动画就是基于Swiper.js实现的,它的特点是图片切换的时候,图片上方将会出现白色背景的视差效果图层,并且它可以适配不同的浏览器尺寸。
这又是一个非常酷的HTML5 Canvas图片切换动画,它是基于知名3D动画库threejs实现的。在图片切换过程中,你也可以通过鼠标拖动来查看切换时的具体细节效果。如果将它制作成一个效果非常独特而华丽的相册或者焦点图插件,相信会很不错的。
这是一个纯CSS实现的手风琴特效的图片切换动画,它的特点是采用了CSS滤镜特效,首先将原图通过滤镜变换成黑白样式,鼠标滑过激活图片后,再将黑白图转换成原图,从而实现图片高亮的效果。
这同样是一款手风琴特效的图片切换动画,它基于jQuery开发,是一款非常不错的jQuery图片轮播插件。它的特点是支持自动播放,使用简单,对于一些商品展示的站点或者app,比较适合使用。
这是一款采用SVG遮罩来实现波浪样式的图片切换动画。所有的图片采用背景图片的方式,图片上方定义SVG圆形路径,通过对圆形svg路径的样式渲染,实现波浪切换的动画效果。
Slicebox是一款基于jQuery的图片切换插件,尽管jQuery在新的web系统中使用越来越少,但我们依然可以使用它的强大插件来丰富我们现有的网站。这款图片切换插件的特点是播放上一张或下一张图片时,图片会出现水平分裂或垂直分裂的3D视觉效果。
这款jQuery图片切换插件拥有简单的使用方法和灵活的扩展方式,支持单页面多实例,并且可适配不同的屏幕尺寸。另外通过配置,我们可以让图片切换组件支持自动播放、显示切换按钮、鼠标滑过放大图片等特性。
这是一款纯CSS实现的图片滚动特效,它的特点是我们可以通过滚动浏览器的横向滚动条,可以让图片进行水平切换滚动。另外图片排列呈现3D投影的视觉效果,同时也可以在移动端通过手指滑动来实现图片的横向滚动浏览。
果图
各位媛猿大家好
今天给大家带来的是 CSS3 3D图片相册特效
大家可以按照自己的意愿 修改成喜欢的样子!
废话不多说,上源码!
@charset "utf-8";
/*科e互联特效基本框架CSS*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "微软雅黑"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{height:0; overflow:hidden; clear:both}
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}
.kePublic{background:#FFF; padding:50px;}
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.mKeBanner,.mKeBanner div{text-align:center;}
/*科e互联特效基本框架CSS结束,应用特效时,以上样式可删除*/
.warper{ width: 860px; height: 300px; border: 2px solid #efefef; margin: 0 auto; padding: 3px 3px 0px 0px; }
#wowslider-container1 { zoom: 1; position: relative; max-width: 716px; float:right; z-index: 90 }
* html #wowslider-container1 { width: 716px }
#wowslider-container1 .ws_images ul { position: relative; width: 10000%; height: auto; left: 0; list-style: none; margin: 0; padding: 0; border-spacing: 0; overflow: visible }
#wowslider-container1 .ws_images ul li { width: 1%; line-height: 0; float: left; font-size: 0; padding: 0!important; margin: 0!important }
#wowslider-container1 .ws_images { position: relative; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden }
#wowslider-container1 .ws_images a { width: 100%; display: block; color: transparent }
#wowslider-container1 img { max-width: none!important }
#wowslider-container1 .ws_images img { width: 100%; border: none 0; max-width: none; padding: 0; margin: 0 }
#wowslider-container1 a { text-decoration: none; outline: 0; border: 0 }
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev { position: absolute; display: none; top: 50%; margin-top: -3.5em; z-index: 60; height: 7.1em; width: 7.1em; background-image: url(../images/arrows.png); background-size: 200% }
#wowslider-container1 a.ws_next { background-position: 100% 0; right: 1em }
#wowslider-container1 a.ws_prev { left: 1em; background-position: 0 0 }
#wowslider-container1 a.ws_next:hover { background-position: 100% 100% }
#wowslider-container1 a.ws_prev:hover { background-position: 0 100% }
* html #wowslider-container1 a.ws_next, * html #wowslider-container1 a.ws_prev { display: block }
#wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev { display: block }
#wowslider-container1 .ws_playpause { display: none; width: 7.1em; height: 7.1em; position: absolute; top: 50%; left: 50%; margin-left: -3.5em; margin-top: -3.5em; z-index: 59; background-size: 100% }
#wowslider-container1:hover .ws_playpause { display: block }
#wowslider-container1 .ws_pause { background-image: url(../images/pause.png) }
#wowslider-container1 .ws_play { background-image: url(../images/play.png) }
#wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover { background-position: 100% 100%!important }
#wowslider-container1 .ws-title { position: absolute; display: block; bottom: 3.5em; left: 1em; margin-right: 1em; padding: 1em .9em .9em .9em; background-color: rgba(0,0,0,0.4); color: #fff; z-index: 50; font-weight: bold; text-transform: uppercase; border-radius: .2em; -moz-border-radius: .2em; -webkit-border-radius: .2em }
#wowslider-container1 .ws-title div { margin-top: .3em; font-size: 1.6em; line-height: 1.15em; font-weight: normal; text-transform: none; color: #fff }
#wowslider-container1 .ws-title span { font-size: 2.4em }
#wowslider-container1 .ws_thumbs { font-size: 0; position: absolute; overflow: auto; z-index: 70; left: -19.51%; top: 0; width: 18.72%; height: 100% }
#wowslider-container1 .ws_thumbs img { text-decoration: none; border: 0; width: 100% }
#wowslider-container1 .ws_thumbs a { position: relative; text-indent: -4000px; color: transparent; opacity: .85; text-decoration: none; display: inline-block; border: 0; margin-bottom: 4%; text-indent: 0; padding: 2.99%; width: 89.54%; background-color: #fff }
#wowslider-container1 .ws_thumbs a:hover { opacity: 1 }
#wowslider-container1 .ws_thumbs a:hover img { visibility: visible }
#wowslider-container1 .ws_thumbs div { position: relative; width: 100% }
#wowslider-container1 .ws_thumbs a.ws_selthumb { background-color: #bce0dd }
#wowslider-container1 .ws_images ul { animation: wsBasic 16s infinite; -moz-animation: wsBasic 16s infinite; -webkit-animation: wsBasic 16s infinite }
@keyframes wsBasic { 0% {
left:-0%
}
12.5% {
left:-0%
}
25% {
left:-100%
}
37.5% {
left:-100%
}
50% {
left:-200%
}
62.5% {
left:-200%
}
75% {
left:-300%
}
87.5% {
left:-300%
}
}
@-moz-keyframes wsBasic { 0% {
left:-0%
}
12.5% {
left:-0%
}
25% {
left:-100%
}
37.5% {
left:-100%
}
50% {
left:-200%
}
62.5% {
left:-200%
}
75% {
left:-300%
}
87.5% {
left:-300%
}
}
@-webkit-keyframes wsBasic { 0% {
left:-0%
}
12.5% {
left:-0%
}
25% {
left:-100%
}
37.5% {
left:-100%
}
50% {
left:-200%
}
62.5% {
left:-200%
}
75% {
left:-300%
}
87.5% {
left:-300%
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 3D图片相册特效 - 网页特效库 - jquery特效</title>
<link rel='stylesheet' href='css/style.css' type='text/css' />
<script type='text/javascript' src='js/jquery.min.js'></script>
</head>
<body class="keBody">
<h1 class="keTitle">CSS3 3D图片相册特效</h1>
<div class="kePublic">
<!--效果html开始-->
<div class="warper">
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><a target="_blank" href="#"><img title="高级职位都在这里" src="images/bimg1.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="互联网设计布道者冯铁看诊把脉" src="images/bimg2.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="颜值不高别装“表”" src="images/bimg3.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="高级职位都在这里" src="images/bimg1.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="互联网设计布道者冯铁看诊把脉" src="images/bimg2.jpg" /></a></li>
<li><a target="_blank" href="#"><img title="颜值不高别装“表”" src="images/bimg3.jpg" /></a></li>
</ul>
</div>
<div class="ws_thumbs">
<div>
<a target="_blank" href="#"><img src="images/simg1.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg2.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg3.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg1.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg2.jpg" /></a>
<a target="_blank" href="#"><img src="images/simg3.jpg" /></a>
</div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="js/slider.js"></script>
</div>
<!--效果html结束-->
<div class="clear"></div>
</div>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei'; color: #fff;">
<p>T</p>
</div>
</body>
</html>
例
各位长友大家早上好,
今天给大家带来的是 9款css3鼠标划过图片散开特效源码!
大家可以自行发挥做成自己喜欢的样子!
若想要文件版源码,请看评论区!
废话不多说,上源码!
body {
margin: 0px;
padding: 0px;
background-color: #C3CCD5;
font-family: 'Source Sans Pro', sans-serif;
}
.albums{
width: 100%;
float: left;
}
.albums-inner{
width: 1100px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
}
.albums-title {
float: left;
width: 100%;
color: rgba(53,117,159,1);
font-size: 20px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: rgba(53,117,159,1);
line-height: 50px;
margin-bottom: 100px;
}
.albums-tab{
float: left;
width: 300px;
margin-right: 100px;
margin-bottom: 100px;
}
.albums-tab:nth-child(3n+0) {
margin-right: 0px;
}
.albums-tab-thumb{
float: left;
width: 300px;
height: 200px;
}
.albums-tab-thumb img {
height: auto;
width: 290px;
background-color: rgba(255,255,255,1);
padding: 5px;
}
.albums-tab-text{
float: left;
width: 100%;
text-align: center;
color: rgba(53,117,159,1);
margin-top: 15px;
font-size: 18px;
}
.albums-tab-text span {
font-size: 14px;
color: rgba(102,102,102,1);
}
<!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" />
<title>9款css3鼠标划过图片散开特效代码 | 手机网站特效| 网页特效库</title>
<meta name="keywords" content="SVG特效, 手机微信网站特效, css3动画, html5特效, 网页特效" />
<link href="css/main.css" rel="stylesheet" type="text/css"/>
<link href="css/sim-prev-anim.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="albums">
<div class="albums-inner">
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-1">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
<img src="images/studio_0001.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>
</div>
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-2">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0010.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div>
</div>
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-3">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
<img src="images/studio_0007.jpg" class="all studio"/>
<img src="images/studio_0008.jpg" class="all studio"/>
<img src="images/studio_0011.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div>
</div>
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-4">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
<img src="images/studio_0007.jpg" class="all studio"/>
<img src="images/studio_0008.jpg" class="all studio"/>
<img src="images/studio_0009.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div>
</div>
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-5">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div>
</div>
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-6">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0009.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
<img src="images/studio_0007.jpg" class="all studio"/>
<img src="images/studio_0008.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div>
</div>
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-7">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div>
</div>
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-8">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0009.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
<img src="images/studio_0007.jpg" class="all studio"/>
<img src="images/studio_0008.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div>
</div>
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-9">
<img src="images/studio_0001.jpg" class="all studio"/>
<img src="images/studio_0002.jpg" class="all studio"/>
<img src="images/studio_0003.jpg" class="all studio"/>
<img src="images/studio_0004.jpg" class="all studio"/>
<img src="images/studio_0005.jpg" class="all studio"/>
<img src="images/studio_0009.jpg" class="all studio"/>
<img src="images/studio_0007.jpg" class="all studio"/>
<img src="images/studio_0008.jpg" class="all studio"/>
<img src="images/studio_0006.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div>
</div>
</div>
</div>
<div style="width: 100%; height: 50px; line-height: 50px; text-align: center;">
TT
</div>
</body>
</html>
*请认真填写需求信息,我们会在24小时内与您取得联系。