WordPress鼠标悬停导航栏虚化

  148 次阅读

CONTENT

给WordPress添加一个虚化功能吧,只有我们吧鼠标放到导航栏上面,也就是网站菜单上面的话,页面就会虚化,这样既有神秘感,有美化了功能。今天也是在别的WordPress站点看见的这个虚化功能,表示确实挺不错的,如下图所示,鼠标移动到WordPress导航栏,页面就虚化了,是不是很美很装逼。并且代码不需要的太多复杂的操作,直接价格css和js就可以了,自动判定即可。

CSS代码:

首先我们需要添加一个css样式代码,添加到主题的style.css或者main.css都可以,也可以在主题的后台全站css哪里添加。

  1. .blur { -webkit-backface-visibility: hidden; -webkit-filter: blur(5px); filter: blur(5px); opacity: 0.9; -webkit-animation: nvfadeInDown 1s .1s ease both; -moz-animation: nvfadeInDown .3s .1s ease both; }
  2. @-webkit-keyframes nvfadeInDown {
  3. 0% { opacity: .2;
  4. 100% { opacity: 1 }
  5. }
  6. 100% { opacity: 1; }
  7. }
  8. @-moz-keyframes nvfadeInDown {
  9. 0% { opacity: .2; }
  10. 100% { opacity: 1; }
  11. }

这里后面会使用js代用这个.blur的标签。这个代码主要用到了 opacity 虚化属性,配合动画实现相关功能。下面是js调用,直接添加到全站的js文件里面即可,如果你不知道是哪一个,在后台也能够找到添加代码的地方,至少dux这个主题后面有通用的css和js添加代码的框框。

  1. $(document).ready(function() {
    
  2. $(".site-navbar").hover(function(){
    
  3. $("#blur").addClass("blur");
    
  4. },function(){
    
  5. $("#blur").removeClass("blur");
    
  6. });
    
  7. });

这里注意,#blur代表的是你要虚化的部分,这个部分通过浏览器的F12可以看出来,接着将这个部分修改为你的主题的主题 id 或者 class 即可。

功能虽然有些多余,不过肯定有喜欢的用户,如果你也喜欢就动手操作吧。

Comments | NOTHING

暂无评论...