现在很多博客导航都非常炫酷,九哥也是不想千篇一律,这里就分享两种鼠标划过导航菜单的特效教程,效果很炫酷的,小伙伴们可以自行体验下。
特效一
一:设置
后台→外观→菜单,点击右上角的“显示选项”,把模块和显示高级菜单属性下的选项全都打勾。
二:代码部分
选择导航菜单(主要菜单)
1.修改导航菜单:本站首页
导航标签添加代码:
- <i class="fa-home fa"></i> <span class="font-text">首页</span>
CSS类添加代码:
- cddh cddh1 wow animated
2.修改导航菜单:99八十一
导航标签添加代码:(同首页)
CSS类添加代码:
- cddh wow animated cddh2
3.修改导航菜单:资源分享
导航标签添加代码:(同首页)
CSS类添加代码:
- cddh wow animated cddh3
之后导航菜单依次类推。
css代码
将以下代码添加到style.css文件中:
- .down-menu>.current-menu-item>a:hover{animation-duration:.8s;animation-name:fadeInUp;background:#c40000 none repeat scroll 0 0;color:#fff!important}@keyframes fushang{0%{opacity:0;transform:translateY(-300px)}10%{opacity:0}100%{opacity:1;transform:translateY(0)}}
- .fushang{animation-name:fushang}
- .cddh{animation-name:fushang;z-index:5}
- .cddh1{animation-duration:.7s}
- .cddh2{animation-duration:.8s}
- .cddh3{animation-duration:1s}
- .cddh4{animation-duration:1.1s}
- .cddh5{animation-duration:1.2s}
- .cddh6{animation-duration:1.3s}
- .cddh7{animation-duration:.5s;animation-name:fushang}
请根据自己导航菜单的多少自行修改对应代码。
效果:打开主页导航会从上依次降落到导航位,鼠标经过会出现浮动特效。具体效果请自行折腾体验。
特效二
直接将以下代码添加到style.css文件中:
- #site-nav .down-menu>li>a:hover{height:88px;border-bottom:88px solid #b485e2}
- #site-nav .down-menu a{height:88px;line-height:88px;border-bottom:0 solid #b485e2;transition-duration:.6s}
效果:鼠标经过会出现背景色,并且有颜色上浮特效。具体效果请自行折腾体验。
相关推荐:

看到很多博客移动端底部都有单独的导航菜单,体验还不错,九哥亲测可用,这里把实现方法分享给小伙伴们。 1.效果展示 2.实现方法 HTML代码 <style type="text/cs...

小算草微信公众号
扫一扫关注小算草微信公众号,打开微信简简单单即可查看小算草所有内容,更快捷更方便。
2019年1月11日 12:27
特效二没有效果啊
2018年7月19日 20:46
博主的网站确实很炫
2018年7月19日 21:05
@数字财富学 谢谢,欢迎常来。
2017年12月10日 06:58
没图片,不知道效果是什么样
2017年12月10日 16:57
@枫叶 试一下就知道效果了,很炫的。
2017年11月20日 13:31
加上适当的特效还是挺不错的
2017年11月19日 12:54
打开有点慢,css特效还是少加点。
2017年11月19日 18:34
@灰常记忆 我用的国外主机,要是国内的肯定快。
2017年11月20日 09:57
@九哥 美国?还是香港,香港总的来说很快。
2017年11月20日 22:00
@灰常记忆 美国
2017年11月16日 20:55
昨天好像没法留言的。
2017年11月16日 20:57
@Koolight 可以的啊,你是不是违反我的评论规则了?发了敏感词?
2017年11月15日 21:48
哈哈挺好的方法刚刚本地看了一下,不过我博客实在太慢了,在搞个特效估计就要炸了。
2017年11月16日 12:52
@胡俊杰 换个服务器?
2017年11月14日 14:50
特效会拖垮wp的,wp太臃肿了。
2017年11月14日 17:01
@夏日博客 适量的特效还是可以的
2017年11月14日 11:00
好看,但是感觉没啥用。
2017年11月14日 11:22
@电烤箱什么牌子好 就是为了好看,哈哈。
2017年11月13日 11:32
对,自己的博客自己做主,喜欢什么风格折腾就是了?
2017年11月12日 17:55
第一个好像是要主题加载有wow.js文件才行,这些特效关键还是要看自己是否喜欢,喜欢就折腾
2017年11月12日 17:59
@懿古今 具体我也没仔细研究,鸟哥主题自带wow.js文件,我还是喜欢我现在的效果。
2019年1月9日 13:15
@九哥 特效二代码,知更鸟加了没效果