@董超Afio 雖然只是小小一個(gè)鏈接以及搭配的一個(gè)簡單的動(dòng)畫，卻由于牽扯到與使用者互動(dòng)的部份，魔鬼藏在細(xì)節(jié)里。

在今年如果談起設(shè)計(jì)來說，沒有人可以避開扁平化設(shè)計(jì)，不管它是否為未來的設(shè)計(jì)趨勢，至少在今年網(wǎng)頁設(shè)計(jì)領(lǐng)域中扁平化很流行很流行。相比以往，扁平化在界面上可以說是一種"偷懶"，界面"偷懶"后，對后面的交互上的細(xì)節(jié)要求就更加高了。因此Tympanus收集了一些和傳統(tǒng)交互效果相比更加有創(chuàng)意且適合扁平化設(shè)計(jì)的一些案例。本文為 21個(gè)鏈接 Hover 交互樣式，原Demo效果在此。

1. 中括號

2. 3D翻轉(zhuǎn)

3. 底部色塊平滑漸隱

4. 底部色塊快速漸隱

5. 3D浮動(dòng)

6. 左側(cè)邊框下拉

7. 上下橫條疊加

8. 邊框描邊

9. 上色塊擴(kuò)張

10. 色塊遮擋

11. 文字漸隱

12. 圓環(huán)漸隱

13. 文字色點(diǎn)漸隱

14. 側(cè)邊變形

15. 文字陰影漸隱

16. 文字陰影跳動(dòng)

17. 文字底部邊框陰影

18. 上下邊框變形

19. 色塊3D翻轉(zhuǎn)

20. 上下翻頁

21. 顏色疊加

原Demo效果

原文地址：http://www.geekpark.net/read/view/187583
編輯：@董超Afio

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)講座：每月邀請國內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音（YY頻道：15335158）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：擁有粉絲量47萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：