12 款絢麗的 HTML5 圖片滑塊動畫 + 源碼下載
純CSS3焦點圖相冊動畫 支持個性化縮略圖
圖片
這是一款純CSS3實現(xiàn)的焦點圖相冊動畫，這款焦點圖的縮略圖很有個性。它的特點是圖片切換非常流暢，動畫簡潔自然；同時由于是純CSS實現(xiàn)，因此使用非常簡單，不需要復(fù)雜的腳本；它最大的特點是支持個性化縮略圖導(dǎo)航，和普通焦點圖的縮略圖不同，它的縮略圖帶有動畫特效，當圖片選中時，縮略圖不規(guī)則邊框會出現(xiàn)線條變換的動畫效果。
純CSS3 3D旋轉(zhuǎn)相冊 支持投影和懸停高亮
圖片
這是一款很炫酷的CSS3 3D旋轉(zhuǎn)相冊動畫，它有以下幾個特點：
- 使用純CSS實現(xiàn)，無需任何JS腳本；
- 自帶陰影和懸停發(fā)光效果，值得關(guān)注的是，這里的陰影并不是一般的shadow只顯示模糊陰影邊框，而是原圖片的實際倒影，因此3D視覺效果更為逼真；3. 支持自動旋轉(zhuǎn)，并且可以通過左右小箭頭按鈕實現(xiàn)不同方向的自動旋轉(zhuǎn)。
基于Swiper.js的圖文卡片滑塊動畫
圖片
這是一款非常實用的圖文卡片滑塊動畫，基于Swiper.js。它的特點是：
- 自適應(yīng)圖文卡片，默認上下顯示圖片和文本描述，當高度小于指定值時，圖片自動隱藏；
- 基于Swiper.js，可以快速初始化一個動畫實例，配置非常方便。
基于Locomotive Scroll的水平畫廊動畫
圖片
這是一款富有創(chuàng)意的圖片滑塊動畫，基于頁面滾動組件Locomotive Scroll。它的特點是可以定義任意數(shù)量的圖片，將其水平方向排列，鼠標滾動時圖片可以左右滑動，展示一種數(shù)字畫廊的視差動畫效果。
CSS3游戲卡片切換特效 支持懸停和高亮
圖片
這是一款比較適合游戲網(wǎng)站或者游戲app中使用的卡片切換動畫，可以是人物卡片、物品卡片等。它的特點是當鼠標滑過卡片時可以呈現(xiàn)高亮的動畫，點擊卡片時可以聚焦放大當前卡片的呈現(xiàn)。同時它還可以自適應(yīng)不同尺寸的設(shè)備，因此在移動端上使用也未嘗不可。
CSS濾鏡特效下的手風琴圖片切換動畫
圖片
這是一個純CSS實現(xiàn)的手風琴特效的圖片切換動畫，它的特點是采用了CSS濾鏡特效，首先將原圖通過濾鏡變換成黑白樣式，鼠標滑過激活圖片后，再將黑白圖轉(zhuǎn)換成原圖，從而實現(xiàn)圖片高亮的效果。
JS扭曲特效的圖片切換動畫
圖片
這是一款基于ReactJS的圖片切換動畫，它的特點是圖片以淡入淡出和扭曲的動畫方式切換，雖然并沒有華麗的動畫效果，但是簡單明了，又不乏創(chuàng)意，非常不錯。
jQuery陰影模糊效果的圖片滑塊動畫
圖片
這是一款簡約而實用的jQuery圖片滑塊動畫插件，這款圖片滑塊插件采用了簡單的粘性切換動畫，它的特點是整個滑塊組件呈現(xiàn)陰影模糊的效果，看起來略有3D的視覺效果，整體樣式還不錯。
HTML5/SVG圖片切換馬賽克過渡動畫
圖片
這是一款基于HTML5和SVG的馬賽克圖片切換動畫，與普通的淡入淡出切換效果不同，它在圖片切換時渲染馬賽克的濾鏡效果。這里的馬賽克動畫效果用到了SVG的濾鏡技術(shù)。
CSS3 3D波浪效果圖片切換動畫
圖片
這是一款基于JavaScript和CSS3的3D波浪效果圖片切換動畫，圖片在切換時，就像波浪翻轉(zhuǎn)一樣，呈現(xiàn)出3D立體的切換動畫特效。同時它還支持自動播放和手動任意圖片切換。
jQuery圖片層疊展開動畫 支持多種展開特效
圖片
這是一款基于jQuery和CSS3的圖片層疊展開動畫插件，它的特點是可以將很多張圖片一層層交錯疊在一起，鼠標點擊后，這些圖片又會同時展開來。讓人驚訝的是，它有多種展開動畫特效，比如從側(cè)邊展開、從中間展開以及網(wǎng)格式展開等。
基于Three.js的圖片撕碎切換動畫
圖片
這是一個非常酷的HTML5 Canvas圖片切換動畫，它是基于知名3D動畫庫threejs實現(xiàn)的。在圖片切換過程中，你也可以通過鼠標拖動來查看切換時的具體細節(jié)效果。如果將它制作成一個效果非常獨特而華麗的相冊或者焦點圖插件，相信會很不錯的。
