9款适合扁平化设计的图标悬浮效果
时间:2022-09-01
浏览:0
本周让我们再来看看同样由关注网页设计新技巧和新趋势的 Codrops 出品的 9款适合扁平化设计的圆形图标悬浮(Hover)效果,原demo效果在此。从这些效果中可以看到,即使在扁平化设计中,魔鬼依旧藏在细节里。 1. 填充色变换
2. 填充色收缩
3. 填充色闪换
4. 描边由实变虚
5. 图标飞入效果 ![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/npzybszpl0z.jpg)
6. 图标内部旋转
7. 描边阴影闪现
8. 边界呼吸效果
9. 描边扩展下过 ![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/hiwofqmpshw.jpg)
![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/g2y2asrnfc1.jpg)
![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/zvzi1mkmy0q.jpg)
![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/1gtvisonz2g.jpg)
![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/i35q4g3k1ln.jpg)
![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/npzybszpl0z.jpg)
![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/po1ga0yfhsy.gif)
![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/z4getknepxo.jpg)
![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/5mxueilctlp.jpg)
![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/5e1jka1xmmi.jpg)
![9款适合扁平化设计的图标悬浮效果](https://file.psd.cn/p/20220901/hiwofqmpshw.jpg)