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