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

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

特效一

一:设置

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

二:代码部分

选择导航菜单(主要菜单)

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
分享
二维码
< <上一篇
下一篇>>