我们来做一个beautiful的css3鼠标悬停效果

悬停第一步,先上效果图

这个其实是一个bootstrap实现的响应式导航,我们今儿要做的了其实是鼠标hover效果,看到那些个Home、About us...底下的三个小点点没有,这个就是一个sex的效果,鼠标移上会有仨点点,而这仨点点呢又不是一下子出来的,是从中间点点往两边散开 形成三个

好了上代码,html导航的结构就不用多说了把,ul li,相信你可以的

我们来做一个beautiful的css3鼠标悬停效果_第1张图片
我们来做一个beautiful的css3鼠标悬停效果_第2张图片

这里呢看到好多类是不是,因为用的是bootstrap的结构写的,平时静态的话其实不用那么复杂

结构不多说,主要说下下面点点的实现,我们得用上:before,当然也有::before,其实一个冒号跟两个冒号没有本质的区别,都是表示在什么什么之前,他这么写主要只是为了区分css2和css3,也就是ie和主流浏览器。双冒号的话貌似只兼容火狐谷歌等,不考虑ie。

然后呢 我们需要这个before先再内容下面用定位实现一个点点,然后用css3的文字阴影去实现两边的点点

我们来做一个beautiful的css3鼠标悬停效果_第3张图片

自行理解哈,若有疑问可去142991222找小姐姐我

好了 上完整的代码

我们来做一个beautiful的css3鼠标悬停效果_第4张图片
我们来做一个beautiful的css3鼠标悬停效果_第5张图片

至于我样张图上的效果,请听下回分解。哈哈哈,或者你来逼供也行142991222

我们来做一个beautiful的css3鼠标悬停效果_第6张图片

你可能感兴趣的:(我们来做一个beautiful的css3鼠标悬停效果)