网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 生活知识 知识问答

FAB效果如何实现

时间:2024-10-31 12:53:34

1、FAB交互效果如下图:点击加号按钮弹出更多当前页可用功能,此效果中包含组件为四个图标组件。主要利用状态的特性制作。

FAB效果如何实现

2、具体做法:1、编辑全局状态制作加号按钮。

FAB效果如何实现

3、拖入「加号」图标,外边框尺寸设置为圆形45*45,图标大小24,图标背景色#ff5722,前景色白色。

FAB效果如何实现

4、制作其余三个按钮。

FAB效果如何实现

5、「收藏」、「编辑」、「返回」按钮的外边框尺寸为圆形40*40,图标大小19,背景色#ff5722,不透明度8,前景色白色。

FAB效果如何实现

6、在状态1中将制作好的四个按钮按如图位置摆放,将「收藏」、「编辑」、「返回」三个图标旋转一定角度,并设置为隐藏。

FAB效果如何实现

7、在状态1中将制作好的四个按钮按如图位置摆放,将「收藏」、「编辑」、「返回」三个图标旋转一定角度,并设置为隐藏。

FAB效果如何实现
© 2026 一点知道
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com