悬停第一步,先上效果图
这个其实是一个bootstrap实现的响应式导航,我们今儿要做的了其实是鼠标hover效果,看到那些个Home、About us...底下的三个小点点没有,这个就是一个sex的效果,鼠标移上会有仨点点,而这仨点点呢又不是一下子出来的,是从中间点点往两边散开 形成三个
好了上代码,html导航的结构就不用多说了把,ul li,相信你可以的
这里呢看到好多类是不是,因为用的是bootstrap的结构写的,平时静态的话其实不用那么复杂
结构不多说,主要说下下面点点的实现,我们得用上:before,当然也有::before,其实一个冒号跟两个冒号没有本质的区别,都是表示在什么什么之前,他这么写主要只是为了区分css2和css3,也就是ie和主流浏览器。双冒号的话貌似只兼容火狐谷歌等,不考虑ie。
然后呢 我们需要这个before先再内容下面用定位实现一个点点,然后用css3的文字阴影去实现两边的点点
自行理解哈,若有疑问可去142991222找小姐姐我
好了 上完整的代码
至于我样张图上的效果,请听下回分解。哈哈哈,或者你来逼供也行142991222