純CSS3焦點(diǎn)圖相冊(cè)動(dòng)畫(huà) 支持個(gè)性化縮略圖

圖片

這是一款純CSS3實(shí)現(xiàn)的焦點(diǎn)圖相冊(cè)動(dòng)畫(huà)，這款焦點(diǎn)圖的縮略圖很有個(gè)性。它的特點(diǎn)是圖片切換非常流暢，動(dòng)畫(huà)簡(jiǎn)潔自然；同時(shí)由于是純CSS實(shí)現(xiàn)，因此使用非常簡(jiǎn)單，不需要復(fù)雜的腳本；它最大的特點(diǎn)是支持個(gè)性化縮略圖導(dǎo)航，和普通焦點(diǎn)圖的縮略圖不同，它的縮略圖帶有動(dòng)畫(huà)特效，當(dāng)圖片選中時(shí)，縮略圖不規(guī)則邊框會(huì)出現(xiàn)線(xiàn)條變換的動(dòng)畫(huà)效果。

純CSS3 3D旋轉(zhuǎn)相冊(cè) 支持投影和懸停高亮

圖片

這是一款很炫酷的CSS3 3D旋轉(zhuǎn)相冊(cè)動(dòng)畫(huà)，它有以下幾個(gè)特點(diǎn)：

1. 使用純CSS實(shí)現(xiàn)，無(wú)需任何JS腳本；
2. 自帶陰影和懸停發(fā)光效果，值得關(guān)注的是，這里的陰影并不是一般的shadow只顯示模糊陰影邊框，而是原圖片的實(shí)際倒影，因此3D視覺(jué)效果更為逼真；3. 支持自動(dòng)旋轉(zhuǎn)，并且可以通過(guò)左右小箭頭按鈕實(shí)現(xiàn)不同方向的自動(dòng)旋轉(zhuǎn)。

基于Swiper.js的圖文卡片滑塊動(dòng)畫(huà)

圖片

這是一款非常實(shí)用的圖文卡片滑塊動(dòng)畫(huà)，基于Swiper.js。它的特點(diǎn)是：

1. 自適應(yīng)圖文卡片，默認(rèn)上下顯示圖片和文本描述，當(dāng)高度小于指定值時(shí)，圖片自動(dòng)隱藏；
2. 基于Swiper.js，可以快速初始化一個(gè)動(dòng)畫(huà)實(shí)例，配置非常方便。

基于Locomotive Scroll的水平畫(huà)廊動(dòng)畫(huà)

圖片

這是一款富有創(chuàng)意的圖片滑塊動(dòng)畫(huà)，基于頁(yè)面滾動(dòng)組件Locomotive Scroll。它的特點(diǎn)是可以定義任意數(shù)量的圖片，將其水平方向排列，鼠標(biāo)滾動(dòng)時(shí)圖片可以左右滑動(dòng)，展示一種數(shù)字畫(huà)廊的視差動(dòng)畫(huà)效果。

CSS3游戲卡片切換特效 支持懸停和高亮

圖片

這是一款比較適合游戲網(wǎng)站或者游戲app中使用的卡片切換動(dòng)畫(huà)，可以是人物卡片、物品卡片等。它的特點(diǎn)是當(dāng)鼠標(biāo)滑過(guò)卡片時(shí)可以呈現(xiàn)高亮的動(dòng)畫(huà)，點(diǎn)擊卡片時(shí)可以聚焦放大當(dāng)前卡片的呈現(xiàn)。同時(shí)它還可以自適應(yīng)不同尺寸的設(shè)備，因此在移動(dòng)端上使用也未嘗不可。

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)圖片高亮的效果。

JS扭曲特效的圖片切換動(dòng)畫(huà)

圖片

這是一款基于ReactJS的圖片切換動(dòng)畫(huà)，它的特點(diǎn)是圖片以淡入淡出和扭曲的動(dòng)畫(huà)方式切換，雖然并沒(méi)有華麗的動(dòng)畫(huà)效果，但是簡(jiǎn)單明了，又不乏創(chuàng)意，非常不錯(cuò)。

jQuery陰影模糊效果的圖片滑塊動(dòng)畫(huà)

圖片

這是一款簡(jiǎn)約而實(shí)用的jQuery圖片滑塊動(dòng)畫(huà)插件，這款圖片滑塊插件采用了簡(jiǎn)單的粘性切換動(dòng)畫(huà)，它的特點(diǎn)是整個(gè)滑塊組件呈現(xiàn)陰影模糊的效果，看起來(lái)略有3D的視覺(jué)效果，整體樣式還不錯(cuò)。

HTML5/SVG圖片切換馬賽克過(guò)渡動(dòng)畫(huà)

圖片

這是一款基于HTML5和SVG的馬賽克圖片切換動(dòng)畫(huà)，與普通的淡入淡出切換效果不同，它在圖片切換時(shí)渲染馬賽克的濾鏡效果。這里的馬賽克動(dòng)畫(huà)效果用到了SVG的濾鏡技術(shù)。

CSS3 3D波浪效果圖片切換動(dòng)畫(huà)

圖片

這是一款基于JavaScript和CSS3的3D波浪效果圖片切換動(dòng)畫(huà)，圖片在切換時(shí)，就像波浪翻轉(zhuǎn)一樣，呈現(xiàn)出3D立體的切換動(dòng)畫(huà)特效。同時(shí)它還支持自動(dòng)播放和手動(dòng)任意圖片切換。

jQuery圖片層疊展開(kāi)動(dòng)畫(huà) 支持多種展開(kāi)特效

圖片

這是一款基于jQuery和CSS3的圖片層疊展開(kāi)動(dòng)畫(huà)插件，它的特點(diǎn)是可以將很多張圖片一層層交錯(cuò)疊在一起，鼠標(biāo)點(diǎn)擊后，這些圖片又會(huì)同時(shí)展開(kāi)來(lái)。讓人驚訝的是，它有多種展開(kāi)動(dòng)畫(huà)特效，比如從側(cè)邊展開(kāi)、從中間展開(kāi)以及網(wǎng)格式展開(kāi)等。

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

圖片

這是一個(gè)非?？岬腍TML5 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ò)的。