导航菜单的小动画

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

济南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/

链接附上

关键词:
返回列表

相关文章

相关案例