9款适合扁平化设计的图标悬浮效果

继上次《21个适合扁平化设计的创意链接效果》备受好评,本周让我们再来看看同样由关注网页设计新技巧和新趋势的 Codrops 出品的 9款适合扁平化设计的圆形图标悬浮(Hover)效果,原demo效果在此。从这些效果中可以看到,即使在扁平化设计中,魔鬼依旧藏在细节里

1. 填充色变换

9款适合扁平化设计的图标悬浮效果

2. 填充色收缩

9款适合扁平化设计的图标悬浮效果

3. 填充色闪换

9款适合扁平化设计的图标悬浮效果

4. 描边由实变虚

9款适合扁平化设计的图标悬浮效果

5. 图标飞入效果

9款适合扁平化设计的图标悬浮效果9款适合扁平化设计的图标悬浮效果

6. 图标内部旋转

9款适合扁平化设计的图标悬浮效果

7. 描边阴影闪现

9款适合扁平化设计的图标悬浮效果

8. 边界呼吸效果

9款适合扁平化设计的图标悬浮效果

9. 描边扩展下过

9款适合扁平化设计的图标悬浮效果

原文地址:极客公园
编辑:董超Afio

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座:每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音(YY频道:156982)分享实战经验。
设计微博:拥有粉丝量55万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

9款适合扁平化设计的图标悬浮效果
 

收藏 19
点赞 1

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。