作為最流行的 JavaScript 開發框架，jQuery 在現在的 Web 開發項目中扮演著重要角色，它簡化了 HTML 文檔遍歷，事件處理，動畫以及 Ajax 交互，幫助 Web 開發人員快速實現可用性和用戶體驗更佳的功能，讓訪問者對網站留下非常好的印象。而 CSS3 作為 CSS 的下一個版本，增加了圓角、旋轉、陰影等強大的特性，甚至還可以實現需要 JavaScript 才能實現的復雜動畫效果。

　　作為最流行的 JavaScript 開發框架，jQuery 在現在的 Web 開發項目中扮演著重要角色，它簡化了 HTML 文檔遍歷，事件處理，動畫以及 Ajax 交互，而 CSS3 作為 CSS 的下一個版本，增加了圓角、旋轉、陰影等強大的特性，甚至還可以實現需要 JavaScript 才能實現的復雜動畫效果。這篇文章特別收集了2012年新鮮出爐的30個精美 jQuery & CSS3 效果，幫助 Web 開發人員快速實現可用性和用戶體驗更佳的功能，讓訪問者對網站留下非常好的印象。記得分享和推薦哦。

精美 jQuery 效果及教程

01. Jquery Custom Content Scroller

基于 jQuery 實現的非常精致的自定義內容滑動條。

 

 

在線演示  下載源碼

 

02. Sideways Jquery Full Screen Image Gallery

非常漂亮的 jQuery 全屏相冊，移動鼠標即可在縮略圖和照片之間切換。

 

 

在線演示  下載源碼

 

03. Jquery Cursor Following Menu

鼠標跟隨的菜單，挺有創意的，不過沒用習慣的話肯能會覺得不好用。

 

 

在線演示  下載源碼

 

04. Jquery Animated Responsive Image Grid

基于 jQuery 實現的動態的響應時圖片格子，提供了三種不同的效果演示。

 

 

在線演示  下載源碼

 

05. Jquery Chop Slider

效果不錯的 jQuery 碎片滑動效果，有非常詳細的制作教程。

 

 

在線演示  下載源碼

 

06. Magnifying glass for image zoom using Jquery and CSS3

基于 jQuery 和 CSS3 實現的放大鏡效果。 

 

 

在線演示  下載源碼

 

07. Responsive jQuery Image and Content Slider

另外一款響應式（Responsive） jQuery 圖片和內容滑動效果。

 

 

在線演示  下載源碼

 

08. Flyout Image Slider

 基于 jQuery 和 CSS3 實現的圖片飛出效果，挺特別的。

 

 

在線演示  下載源碼

 

09. Portfolio Flipping Slider Using jQuery & CSS3

基于 jQuer 和 CSS3 實現的圖片翻轉效果。 

 

 

在線演示  下載源碼

 

10. Create a simple jQuery hover call-to-action box

基于 jQuery 實現的一個簡單的懸浮行為召喚（call-to-action）功能。 

 

 

在線演示  下載源碼

 

11. Auto Moving Jquery

非常特別的二級菜單效果，值得借鑒一下，有詳細的教程。

 

 

在線演示  下載源碼

 

12. New Search Form Using Jquery

 基于 jQuery 和 CSS3 實現的非常精美的搜索框效果。

 

 

在線演示  下載源碼

 

精美 CSS3 效果及教程

01. Circle Hover Effects

 基于 CSS3 Transition 實現的圓圈懸浮變換效果，有七種精美效果演示。

 

 

在線演示  下載源碼

 

02. Parallax Effect

 集成了視差滾動（Parallax Scrolling）特效的幻燈片。

 

 

在線演示  下載源碼

 

03. Grab Dribble Feed

利用 Dribbble Api 實現的抓取 Dribble 內容的精美效果。

 

 

在線演示  下載源碼

 

04. Modern Light box With CSS3

使用 CSS3 實現的現代 Light box 效果。

 

 

在線演示  下載源碼

 

05. Image With Bounce Effect

 基于 CSS3 實現的圖片反彈（Bounce Effect）顯示效果。

 

 

在線演示  下載源碼

 

06. CSS3 Book Generator

結合 jQuery 和 CSS3 實現的在線圖書制作工具。 

 

 

在線演示  下載源碼

 

07. Camera API 

 

 

在線演示  下載源碼

 

08. CSS3 Parallax scrolling slider

又一個應用了視差滾動（Parallax scrolling）效果的滑塊功能。 

 

 

在線演示  下載源碼

 

09. Flipping Circle with CSS3

基于 CSS3 實現的圓圈翻轉效果。 

 

 

在線演示  下載源碼

 

10. Swatch Book

 

 

在線演示  下載源碼

 

11. Image Accordion

基于 CSS3 和 jQuery 實現的圖片手風琴（Accordion）效果。

 

 

在線演示  下載源碼

 

12. Designing MAC Book & IMAC Using CSS3

 

 

在線演示  下載源碼

 

13. Annotation Overlay Effect

非常有用的遮罩注釋（Annotation Overlay）效果。 

 

 

在線演示  下載源碼

 

14. Jquery Triple Panel Image Slider

太漂亮了！基于 jQuery 和 CSS3 實現的三層面板圖片滑動效果，超有立體感。

 

 

在線演示  下載源碼

 

15. Apple Login Form

基于 CSS3 實現的蘋果風格的登錄表單。 

 

 

在線演示  下載源碼

 

16. Product Showcase with CSS3

使用 CSS3 實現的絢麗的產品展示效果，非常有用！ 

 

 

在線演示  下載源碼

 

17. CSS3 Coded Responsive Ready, Social Media Buttons

純 CSS3 制作的非常精美的社交媒體按鈕。

 

 

在線演示  下載源碼

 

18. CSS3 Animation Experiment

壓軸的是基于 CSS3 的動畫實驗，實現了一個虛擬的 DJ 音樂控制臺。

 

 

在線演示  下載源碼

 

您可能還喜歡

 

• 精心挑選的優秀jQuery Ajax分頁插件和教程
• 精心挑選的優秀 jQuery 手風琴插件和教程
• 8款非常棒的響應式 jQuery 幻燈片插件推薦
• 精心挑選的優秀 jQuery 文本特效插件和教程
• 精心挑選的美輪美奐的 jQuery 圖片特效插件

 

英文鏈接：30 Fresh and Useful CSS3 & Jquery Effects

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源