超萌的猫头鹰登录界面，当输入密码的时候，猫头鹰会用翅膀遮住双眼，兼容主流浏览器。
实现方法：
1、编辑WordPress根目录下的/wp-login.php文件
 
在最后面的：

前面加上以下js代码：



再在此文件中搜索找到下面代码：

		


替换为：

     

           

           

           

               

               

           
      

2、编辑/wp-admin/css目录下的login.min.css文件

 

把下面css样式代码加到此文件的最下面（如果打开此文件后只显示压缩后的一行代码，直接复制到最后面保存即可）：

下面代码中有2个图片链接，可以下载上传到自己的服务器上，再修改代码为自己的图片链接。
#login #owl-login {
    position: absolute;
    left: 50%;
    margin-left: -111px;
    background-image: url("https://www.hmjblog.com/wp-admin/images/owl-login.png");
    height: 108px;
    width: 211px;
    margin-top: -79px;
}
#login #owl-login .hand {
    width: 34px;
    height: 34px;
    border-radius: 40px;
    background-color: #472D20;
    transform: scaleY(0.6);
    transition: all 0.3s ease-out 0s;
    position: absolute;
    left: 14px;
    bottom: -8px;
}
#login #owl-login .hand.hand-r {
    left: 170px;
}
#login #owl-login .hand {
    width: 34px;
    height: 34px;
    border-radius: 40px;
    background-color: #472D20;
    transform: scaleY(0.6);
    transition: all 0.3s ease-out 0s;
    position: absolute;
    left: 14px;
    bottom: -8px;
}
#login #owl-login .arms {
    top: 58px;
    position: absolute;
    width: 100%;
    height: 41px;
    overflow: hidden;
}
#login #owl-login.password .hand{
  -webkit-transform: translateX(42px) translateY(-15px) scale(0.7);
  -moz-transform: translateX(42px) translateY(-15px) scale(0.7);
  -o-transform: translateX(42px) translateY(-15px) scale(0.7);
  -ms-transform: translateX(42px) translateY(-15px) scale(0.7);
  transform: translateX(42px) translateY(-15px) scale(0.7);
}
#login #owl-login.password .hand.hand-r {
  -webkit-transform: translateX(-42px) translateY(-15px) scale(0.7);
  -moz-transform: translateX(-42px) translateY(-15px) scale(0.7);
  -o-transform: translateX(-42px) translateY(-15px) scale(0.7);
  -ms-transform: translateX(-42px) translateY(-15px) scale(0.7);
  transform: translateX(-42px) translateY(-15px) scale(0.7);
}
#login #owl-login .arms .arm{
  width: 40px;
  height: 65px;
  position: absolute;
  left: 20px;
  top: 40px;
  background-image: url("https://www.hmjblog.com/wp-admin/images/owl-login-arm.png");
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
#login #owl-login .arms .arm.arm-r {
  -webkit-transform: rotate(20deg) scaleX(-1);
  -moz-transform: rotate(20deg) scaleX(-1);
  -o-transform: rotate(20deg) scaleX(-1);
  -ms-transform: rotate(20deg) scaleX(-1);
  transform: rotate(20deg) scaleX(-1);
  left: 158px;
}
#login #owl-login.password .arms .arm{
  -webkit-transform: translateY(-40px) translateX(40px);
  -moz-transform: translateY(-40px) translateX(40px);
  -o-transform: translateY(-40px) translateX(40px);
  -ms-transform: translateY(-40px) translateX(40px);
  transform: translateY(-40px) translateX(40px);
}
#login #owl-login.password .arms .arm.arm-r{
  -webkit-transform: translateY(-40px) translateX(-40px) scaleX(-1);
  -moz-transform: translateY(-40px) translateX(-40px) scaleX(-1);
  -o-transform: translateY(-40px) translateX(-40px) scaleX(-1);
  -ms-transform: translateY(-40px) translateX(-40px) scaleX(-1);
  transform: translateY(-40px) translateX(-40px) scaleX(-1);
}
#login_error, .login .message {
    margin-top: 20px;
}

OK，完工，去登录页面刷新一下，看看是否已经有效果了~

 

如果嫌改代码麻烦，我准备好了wp-login.php和login.min.css最终配置文件。下载后覆盖到自己服务器上相对应的目录即可达到上面修改代码的效果。

 

有的同学问登录界面背景图怎么搞的，请移步到这里https://www.hmjblog.com/wordpress/3203.html
原文链接：WordPress制作超萌的猫头鹰登录界面，转载请注明来源！
				

		

    			赞 
        3
    			
		
		

			　分享到：