css3兼容手机的响应式导航

2018年1月10日20:55:37 发表评论 36

css3利用多媒体查询做的响应式导航,利用了css3中的动画transition属性,然后利用原生js做动画的开关,请在窗口小于980的情况下预览,其实就是改变left而已,动画效果不是用js实现的,特别的容易,特效也是当下最流行的。

一、效果预览

二、难点解析

要说难点,这个效果并不是难在动画上特效上,而是难在布局上,导航的合理布局,元素的合理应用,就比如“首页”按钮上有个下拉的标志,这个直接用css3画的,新手如果刚开始画估计都难在这里了,我刚开始也是一样的,直到后来通过审查元素看到样式之后才发现是那么的神奇。

css有时真的比简单的js效果更难,这点我深有感悟。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: