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

Mr Y WordPress 27603 阅读
      现在很多博客导航都非常炫酷，九哥也是不想千篇一律，这里就分享两种鼠标划过导航菜单的特效教程，效果很炫酷的，小伙伴们可以自行体验下。

特效一

一：设置

后台→外观→菜单，点击右上角的“显示选项”，把模块和显示高级菜单属性下的选项全都打勾。

二：代码部分

选择导航菜单（主要菜单）

1.修改导航菜单：本站首页

导航标签添加代码：

  1. <i class="fa-home fa"></i> <span class="font-text">首页</span>

CSS类添加代码：

  1. cddh cddh1 wow animated

2.修改导航菜单：99八十一

导航标签添加代码：（同首页）

CSS类添加代码：

  1. cddh wow animated cddh2

3.修改导航菜单：资源分享

导航标签添加代码：（同首页）

CSS类添加代码：

  1. cddh wow animated cddh3

之后导航菜单依次类推。

css代码

将以下代码添加到style.css文件中：

  1. .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)}}
  2. .fushang{animation-name:fushang}
  3. .cddh{animation-name:fushang;z-index:5}
  4. .cddh1{animation-duration:.7s}
  5. .cddh2{animation-duration:.8s}
  6. .cddh3{animation-duration:1s}
  7. .cddh4{animation-duration:1.1s}
  8. .cddh5{animation-duration:1.2s}
  9. .cddh6{animation-duration:1.3s}
  10. .cddh7{animation-duration:.5s;animation-name:fushang}

请根据自己导航菜单的多少自行修改对应代码。

效果：打开主页导航会从上依次降落到导航位，鼠标经过会出现浮动特效。具体效果请自行折腾体验。

特效二

直接将以下代码添加到style.css文件中：

  1. #site-nav .down-menu>li>a:hover{height:88px;border-bottom:88px solid    #b485e2}
  2. #site-nav .down-menu a{height:88px;line-height:88px;border-bottom:0 solid   #b485e2;transition-duration:.6s}

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

相关推荐：

[bsy_insert_post ids=3294]

版权声明：
作者：Mr Y
链接：https://www.99bsy.com/3305.html
来源：小算草
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>