藍藍設計( tweetduck.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務.
每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計
來源：http://yidianzixun.com/home?page=article&id=06vnp7g9&up=0
如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里
1.HTML5截圖功能 可拖拽圖片
截圖在我們平常電腦應用中非常的廣泛，包括開發(fā)者和一般的使用用戶。今天介紹的這款HTML5截圖應用可以幫助你在上傳頭像前截取自己的頭像，你只需要拖拽移動圖片即可選中要截取的部分，HTML5會自動將選取的圖片自動生成一張新的圖片來保存，從而完成截圖的功能。另外，該HTML5截圖應用還支持按住shift鍵實現圖片同比例縮放。
2.純CSS3動畫按鈕效果 5種漂亮樣式
這次我們要來分享一款很不錯的CSS3按鈕動畫，這款CSS3按鈕一共有5種動畫方式，每一種都是鼠標滑過動畫形式，雖然這些動畫按鈕不是十分華麗，但是小編覺得不像其他按鈕那樣很難擴展，我們可以修改CSS代碼隨意改變自己喜歡的顏色樣式。
3.使用 SVG 制作單選和多選框動畫
通過 JavaScript 實現 SVG 路徑動畫，我們可以做很多花哨的東西。今天我們要為您介紹一些復選框和單選按鈕效果。實現的主要思路是隱藏原生的輸入框，使用偽元素創(chuàng)造更具吸引力的樣式，輸入框被選中的時候執(zhí)行 SVG 動畫。
4.使用 CSS3 偽元素實現照片堆疊效
CSS3 里引入的偽元素讓 Web 開發(fā)人員能夠在不需要額外添加 HTML 標簽的情況下制作出復雜的視覺效果。例如，:before 和 :after 這個兩個 CSS3 偽元素就可以幫助你實現很多有趣的效果。本教程將告訴你如何使用 CSS3 為元素創(chuàng)建一組漂亮的圖片堆疊效果。
今天要給大家推薦一款基于jquery的鼠標經過圖片列表。當鼠標經過列表圖片的時候，圖片放大，且有一個半透明的遮罩層隨之移動。
6.基于 CSS3 & jQuery 的過濾和排序插件
MixItUp 是一款輕量，但功能強大的 jQuery 插件，提供了對分類和有序內容的美麗的動畫過濾和排序功能。特別適合用于作品集網站，畫廊，圖片博客以及任何的分類或有序內容。它是如何工作的？ MixItUp 根據你的過濾條件決定哪些內容隱藏，顯示或重新定位，然后應用 CSS3 transitions 平滑動畫到新位置。這是一個非常有效的方法，借助了現代瀏覽器的渲染能力，并避免過多的使用 jQuery 進行 DOM 操作。
7.實現圖片的形狀遮罩和動畫放大效果
今天，給大家分享來自 Quess 的如何實現圖片的形狀遮罩和放大動畫效果。在很多作品集網站中，我們經常能看到這樣的造型和效果。就個人而言，我覺得我們不能因為舊的瀏覽器不支持，我們就放棄在項目中使用 HTML5 或者 CSS3 技術。我們應該“獎勵”使用現代瀏覽器的用戶，給他們一個更好的用戶體驗。
8.CSS3 Animation Cheat Sheet：實用的 CSS3 動畫庫
CSS3 Animation Cheat Sheet 是一組預設的動畫庫，為您的 Web 項目添加各種很炫的動畫。所有你需要做的是添加樣式表到你的網站，為你想要添加動畫效果的元素應用預制的 CSS 類就可以了。
9.自適應智能設備方向的視差效果插件
Parallax.js 是一個簡單的，輕量級的的視差引擎，能夠對智能設備的方向作出反應。在沒有沒有陀螺儀或運動檢測硬件可用的時候，使用光標的位置來代替。有很多的行為，你就可以設置為任何給定的視差實例。這些行為既可以通過在標記中指定的數據屬性或通過構造函數 和 JavaScript API 調用。
10.管理 CSS 動畫的強大的小工具
Animo.js 是一個功能強大的小工具，用于管理 CSS 動畫。它的特色功能包括像堆棧動畫，創(chuàng)建跨瀏覽器的模糊，設置動畫完成的回調等等。Animo 還包括驚人的 animate.css，為您提供了近60個美麗的動畫，還加入了一些輔助動畫到庫中。
掃一掃，案例分享帶回家（藍藍設計微信公眾平臺）
