咨询电话:
15628812133
29
2019/06

导航菜单的小动画

发布时间:2019-06-29 11:08:45
发布者:请等等我
浏览量:
0

下午好,吃完了娱乐圈里面的瓜,下面看一个导航菜单的小动画

济南App开发

虽然图片上看着不咋地,但是实际操作起来的话,还是挺有意思

界面布局很简单,

微信小程序开发

写个ul li 然后 li 里面 嵌套一个ul

页面布局写好,然后写CSS美化一下样式。

当触摸第一级的li的时候下面的ul显示。

因为有翻转效果。所以要给ul设置一个旋转属性。旋转180度。

济南文汇软件,小程序开发

当触摸的时候旋转角度为0度,为了效果不那么生硬,添加一个opcaity为0;触摸时为1;

动画时间设置一下为0.6秒。

然后给第二级ul下面的li设置一下延时属性。

http://www.cnwenhui.cn/d/demo/jzh/

链接附上

关键词:
返回列表