WordPress给导航菜单添加鼠标划过特效

现在很多博客导航都很酷，汇站网在这里将分享两个特殊效果教程，鼠标放在导航菜单上。效果很爽，朋友可以自己体验。

特效
一:设置
背景→外观→菜单，点击右上角“显示选项”，勾选模块属性下的所有选项，显示高级菜单。

第二部分:法典
选择导航菜单(主菜单)

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}

请根据您的导航菜单修改相应的代码。

效果:打开主页导航时，会从顶部依次落到导航位置，鼠标经过时会出现浮动效果。具体效果请抛去自己的经验。

特效二

#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}

效果：鼠标经过会出现背景色，并且有颜色上浮特效。具体效果请自行折腾体验。

转载请注明：汇站网 » WordPress 给导航菜单添加鼠标划过特效