10款精美的HTML5圖片輪播動(dòng)畫(huà)+打包源碼下載

今天要給大家分享10款精美的HTML5圖片輪播/切換動(dòng)畫(huà)，這些動(dòng)畫(huà)每一個(gè)都有自己的特點(diǎn)，不管你是PC端的網(wǎng)頁(yè)，還是移動(dòng)端的H5應(yīng)用，都可以嘗試使用這些動(dòng)畫(huà)來(lái)提高應(yīng)用的用戶(hù)體驗(yàn)。

?
PS：請(qǐng)你耐心看完，文末我提供了所有動(dòng)畫(huà)的源碼打包下載鏈接，如果你喜歡這些動(dòng)畫(huà)，可以按需下載，希望對(duì)你有所幫助。

1. 可無(wú)限水平滑動(dòng)的JS畫(huà)廊動(dòng)畫(huà)

這是一個(gè)簡(jiǎn)約而實(shí)用的JS畫(huà)廊相冊(cè)組件，它的特點(diǎn)是可以添加無(wú)限多張相片，并且支持水平無(wú)限循環(huán)滑動(dòng)。另外它還支持對(duì)畫(huà)廊中的相片進(jìn)行展開(kāi)和折疊，并同時(shí)動(dòng)態(tài)展示相片的標(biāo)題和描述。這款相冊(cè)組件主要采用了jQuery插件以及CSS3的過(guò)渡動(dòng)畫(huà)特性，使用起來(lái)十分方便。

2. 基于TweenMax.js的圖片碎裂切換動(dòng)畫(huà)

這是一個(gè)基于TweenMax動(dòng)畫(huà)庫(kù)的圖片碎裂切換動(dòng)畫(huà)，它的特點(diǎn)是點(diǎn)擊圖片時(shí)，圖片就會(huì)像玻璃那樣碎裂成許多塊，然后漸漸地消失，直到下一張圖片顯示為止。這款圖片碎裂動(dòng)畫(huà)也可以應(yīng)用在焦點(diǎn)圖的切換動(dòng)畫(huà)中，效果非常不錯(cuò)。

3. 基于Swiper.js的視差效果圖片滑塊動(dòng)畫(huà)

Swiper.js是一個(gè)流行的移動(dòng)端輪播圖插件，它提供了豐富的功能和配置項(xiàng)。這款圖片滑塊動(dòng)畫(huà)就是基于Swiper.js實(shí)現(xiàn)的，它的特點(diǎn)是圖片切換的時(shí)候，圖片上方將會(huì)出現(xiàn)白色背景的視差效果圖層，并且它可以適配不同的瀏覽器尺寸。

4. 基于Three.js的圖片撕碎切換動(dòng)畫(huà)

這又是一個(gè)非常酷的HTML5 Canvas圖片切換動(dòng)畫(huà)，它是基于知名3D動(dòng)畫(huà)庫(kù)threejs實(shí)現(xiàn)的。在圖片切換過(guò)程中，你也可以通過(guò)鼠標(biāo)拖動(dòng)來(lái)查看切換時(shí)的具體細(xì)節(jié)效果。如果將它制作成一個(gè)效果非常獨(dú)特而華麗的相冊(cè)或者焦點(diǎn)圖插件，相信會(huì)很不錯(cuò)的。

5. CSS濾鏡特效下的手風(fēng)琴圖片切換動(dòng)畫(huà)

這是一個(gè)純CSS實(shí)現(xiàn)的手風(fēng)琴特效的圖片切換動(dòng)畫(huà)，它的特點(diǎn)是采用了CSS濾鏡特效，首先將原圖通過(guò)濾鏡變換成黑白樣式，鼠標(biāo)滑過(guò)激活圖片后，再將黑白圖轉(zhuǎn)換成原圖，從而實(shí)現(xiàn)圖片高亮的效果。

6. jQuery手風(fēng)琴圖片播放器可自動(dòng)播放

這同樣是一款手風(fēng)琴特效的圖片切換動(dòng)畫(huà)，它基于jQuery開(kāi)發(fā)，是一款非常不錯(cuò)的jQuery圖片輪播插件。它的特點(diǎn)是支持自動(dòng)播放，使用簡(jiǎn)單，對(duì)于一些商品展示的站點(diǎn)或者app，比較適合使用。

7. HTML5 SVG實(shí)現(xiàn)的波浪切換圖片動(dòng)畫(huà)

這是一款采用SVG遮罩來(lái)實(shí)現(xiàn)波浪樣式的圖片切換動(dòng)畫(huà)。所有的圖片采用背景圖片的方式，圖片上方定義SVG圓形路徑，通過(guò)對(duì)圓形svg路徑的樣式渲染，實(shí)現(xiàn)波浪切換的動(dòng)畫(huà)效果。

8. 基于jQuery的3D圖片切換插件Slicebox

Slicebox是一款基于jQuery的圖片切換插件，盡管jQuery在新的web系統(tǒng)中使用越來(lái)越少，但我們依然可以使用它的強(qiáng)大插件來(lái)豐富我們現(xiàn)有的網(wǎng)站。這款圖片切換插件的特點(diǎn)是播放上一張或下一張圖片時(shí)，圖片會(huì)出現(xiàn)水平分裂或垂直分裂的3D視覺(jué)效果。

9. jQuery響應(yīng)式圖片切換插件，可自動(dòng)播放

這款jQuery圖片切換插件擁有簡(jiǎn)單的使用方法和靈活的擴(kuò)展方式，支持單頁(yè)面多實(shí)例，并且可適配不同的屏幕尺寸。另外通過(guò)配置，我們可以讓圖片切換組件支持自動(dòng)播放、顯示切換按鈕、鼠標(biāo)滑過(guò)放大圖片等特性。

10. 純CSS實(shí)現(xiàn)的水平3D圖片滾動(dòng)特效

這是一款純CSS實(shí)現(xiàn)的圖片滾動(dòng)特效，它的特點(diǎn)是我們可以通過(guò)滾動(dòng)瀏覽器的橫向滾動(dòng)條，可以讓圖片進(jìn)行水平切換滾動(dòng)。另外圖片排列呈現(xiàn)3D投影的視覺(jué)效果，同時(shí)也可以在移動(dòng)端通過(guò)手指滑動(dòng)來(lái)實(shí)現(xiàn)圖片的橫向滾動(dòng)瀏覽。

果圖

各位媛猿大家好

今天給大家?guī)?lái)的是 CSS3 3D圖片相冊(cè)特效

大家可以按照自己的意愿修改成喜歡的樣子！

想要文件版源碼的，請(qǐng)加窮581549454

廢話不多說(shuō)，上源碼！

CSS源碼：

@charset "utf-8";

/*科e互聯(lián)特效基本框架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互聯(lián)特效基本框架CSS結(jié)束，應(yīng)用特效時(shí)，以上樣式可刪除*/

.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%

}

index：

<!DOCTYPE HTML>

<html>

<head>

<title>CSS3 3D圖片相冊(cè)特效 - 網(wǎng)頁(yè)特效庫(kù) - jquery特效</title>

</head>

<h1 class="keTitle">CSS3 3D圖片相冊(cè)特效</h1>

<ul>

</ul>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

例

各位長(zhǎng)友大家早上好，

今天給大家?guī)?lái)的是 9款css3鼠標(biāo)劃過(guò)圖片散開(kāi)特效源碼！

大家可以自行發(fā)揮做成自己喜歡的樣子！

若想要文件版源碼，請(qǐng)看評(píng)論區(qū)！

廢話不多說(shuō)，上源碼！

CSS源碼：

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);

}

index：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</div>

<div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div>

</div>

</div>

<div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div>

</div>

</div>

</body>

</html>

在線咨詢(xún)

上一篇：使用HTML添加表格1（基本元素）-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
下一篇：1024 程序員節(jié)，用24種語(yǔ)言祝福大家節(jié)日快樂(lè)，代碼無(wú)bug

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

10款精美的HTML5圖片輪播動(dòng)畫(huà)+打包源碼下載

1. 可無(wú)限水平滑動(dòng)的JS畫(huà)廊動(dòng)畫(huà)

2. 基于TweenMax.js的圖片碎裂切換動(dòng)畫(huà)

3. 基于Swiper.js的視差效果圖片滑塊動(dòng)畫(huà)

4. 基于Three.js的圖片撕碎切換動(dòng)畫(huà)

5. CSS濾鏡特效下的手風(fēng)琴圖片切換動(dòng)畫(huà)

6. jQuery手風(fēng)琴圖片播放器 可自動(dòng)播放

7. HTML5 SVG實(shí)現(xiàn)的波浪切換圖片動(dòng)畫(huà)

8. 基于jQuery的3D圖片切換插件Slicebox

9. jQuery響應(yīng)式圖片切換插件，可自動(dòng)播放

10. 純CSS實(shí)現(xiàn)的水平3D圖片滾動(dòng)特效

想要文件版源碼的，請(qǐng)加窮581549454

CSS源碼：

index：

CSS源碼：

index：

您的項(xiàng)目需求

6. jQuery手風(fēng)琴圖片播放器可自動(dòng)播放