這就像在房間裡裝飾一棵美麗的聖誕樹。有時，一個帶有酷炫效果的小型網頁會讓您的專案煥發光芒。這是一個非常有趣的系列，分享了一些頁面上常見的很酷的圖像效果。
1.imagehover
網址：https://github.com/ciar4n/imagehover.css
imagehover.css- 純CSS3滑鼠滑過圖片效果動畫庫， 44種滑鼠滑過效果
2. ImageTiltEffect
網址：https://github.com/codrops/ImageTiltEffect
TiltEffect是一款讓影像跟隨滑鼠產生微妙立體傾斜效果的插件，使其有層次感和深度感。
3.Magnifier.js
網址：https://github.com/mark-rolich/Magnifier.js
Magnifier是一款實用純js製作的圖片放大鏡插件。它有以下一些特定：
- 可以使用滑鼠滾輪放大縮小圖片。
- 可以透過js或data屬性來設定選項。
- 一次呼叫可以附加多張圖片。
- 使用者可以自訂滑鼠進入、離開、移動事件。
- 載入大圖片時可以顯現等待文字。
4.gl-react-image-effects
網址：https://github.com/gre/gl-react-image -effects
通用的withReact範例應用程式與Web。 iOS和Android實作一起運行一個程式碼庫( 一些特定的程式碼被設計成在平台上創建不同的UI )。
[外鏈圖片轉存失敗,來源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6q6PdMWo-1607906041866)(/img/bVbKV43)]
#[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Rvwi5mHU-1607906041870)(/img/bVbKV49)]
5.StickyImageEffect
受ultanoir網站啟發的幻燈片顯示，具有黏性圖像效果。
地址：https://github.com/Anemolo/StickyImageEffect
[外鏈圖片轉存失敗,來源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img -eMaWbN9k-1607906041871)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117123.gif)]
6.HeatDistortionEffect. WebGL熱變形效果全螢幕背景。
網址：https://github.com/lbebber/HeatDistortionEffect
[外鏈圖片轉存失敗,來源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img -xC5TrFBm-1607906041871)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117124.gif)]
7.ImageDraggingEffects>使用各種技術為影像設定的一組有趣的拖曳效果。
網址:https://github.com/codrops/ImageDraggingEffects
##8.jQuery.BgSwitcher
jQuery.BgSwitcher實作背景影像切換效果。 
地址:https://github.com/rewish/jquery-bgswitcher
[外鏈圖片轉存失敗,來源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IGxWVx9I-1607906041874)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117126.gif)]
9.Full#ImRev#. ##一個完整的圖像顯示精美的縮圖滑動效果。
地址:https://github.com/codrops/FullImageReveal
#10.diaporama
Diaporama是一種圖像/視頻/內容幻燈片引擎，提供高品質的動畫效果，包括Kenburns效果和GLSL Transitions。
地址:https://github.com/gre/diaporama
[外鏈圖片轉存失敗,來源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img -KWmJkOnn-1607906041876)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117128.gif)]
11. Follow
#11. Follow
#影像的旋轉會跟隨遊標移動而變化。
地址:https://github.com/bersLucas/FollowCursor
12.react-native-kenburns-view
KenBurns用於React Native應用程式的映像效果
網址: https://github.com/nHiRanZ/react-native-kenburns-view
大家都說履歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教學】。
13.vintageJS
VINTAGEJS 是一個jQuery插件，它使用HTML5 canvas為你的圖像/照片添加驚嘆的復古效果。它預置了三種效果，並且可以輕鬆自訂。
網址:https://github.com/lindelof/awesome-web-effect#
14.ThumbnailGridExpandingPreview
Tutorial on how to create a grid of thumbnails using expanded image previews, similar to the effect seen on Google Images.
Address: https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/
15.gridder
A jQuery plug-in that displays the abbreviation A thumbnail grid expands the preview, similar to what you see on Google Images.
Address: https://github.com/oriongunning/gridder
16.MotionTransitionEffect
Fast motion transition of image slides Effect.
Address: https://github.com/codrops/MotionTransitionEffect
17.tiltedpage_scroll
tiltedpage_scroll.js is a support A plug-in for mouse scrolling and setting the picture angle. When the page is scrolled, the picture will have a tilted 3D effect, which is a good choice for product display.
Address: http://peachananr.github.io/tiltedpage_scroll/demo/tiltedpage_scroll_demo.html
Original address: https:// github.com/lindelof/awesome-web-effect
Author: lindelof
Translation: Front-end Xiaozhi
For more programming related knowledge, please visit:Programming Teaching! !
以上是17個酷炫又實用的圖像特效庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
