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

2019-06-1920:28:34 发表评论 94 views
阿里云首台5折

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

一:设置

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

二:代码部分

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

1.修改导航菜单:从天而降

导航标签添加代码:

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

CSS类添加代码:

  1. cddh cddh1 wow animated

2.修改导航菜单:网络

导航标签添加代码:(同首页)

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}

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

 

文章来源:99八十一

  • NAS技术交流
  • 扫一扫入裙
  • weinxin
  • 软路由技术讨论
  • 扫一扫入裙
  • weinxin
阿里云首台5折
吊儿啷当

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: