• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】9款適合扁平化設計的圖標懸浮效果




    9款適合扁平化設計的圖標懸浮效果

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是極客公園,感謝極客公園提供設計理論的實作教學。

    教學大綱:

    本周讓我們再來看看同樣由關注網頁設計新技巧和新趨勢的Codrops出品的9款適合扁平化設計的圓形圖標懸浮(Hover)效果,原demo效果在此。從這些效果中可以看到,即使在扁平化設計中,魔鬼依舊藏在細節里。


    設計理論教學開始

    繼上次《21個適合扁平化設計的創意鏈接效果》備受好評,本周讓我們再來看看同樣由關注網頁設計新技巧和新趨勢的Codrops出品的9款適合扁平化設計的圓形圖標懸浮(Hover)效果,原demo效果在此。從這些效果中可以看到,即使在扁平化設計中,魔鬼依舊藏在細節里。

    1. 填充色變換

    9款適合扁平化設計的圖標懸浮效果

    2. 填充色收縮

    9款適合扁平化設計的圖標懸浮效果

    3. 填充色閃換

    9款適合扁平化設計的圖標懸浮效果

    4. 描邊由實變虛

    9款適合扁平化設計的圖標懸浮效果

    5. 圖標飛入效果

    9款適合扁平化設計的圖標懸浮效果

    9款適合扁平化設計的圖標懸浮效果

    6. 圖標內部旋轉

    9款適合扁平化設計的圖標懸浮效果

    7. 描邊陰影閃現

    9款適合扁平化設計的圖標懸浮效果

    8. 邊界呼吸效果

    9款適合扁平化設計的圖標懸浮效果

    9. 描邊擴展下過

    9款適合扁平化設計的圖標懸浮效果

    — —

    文章永久連結為: 9款適合扁平化設計的圖標懸浮效果