Android 猫头鹰登录界面,WordPress个性化登陆界面(添加会遮挡双眼的猫头鹰动画)...
在开始本篇文章之前,我们先来看下最终效果,需要的话就继续看下去吧。文章最后面还加了个点心,欢迎品尝。
即当鼠标切换到登陆密码一栏时,那只萌萌的猫头鹰就害羞的遮挡住了双眼。陌小雨给大家分享这效果的具体方法:
1、编辑WordPress根目录下的/wp-login.php 文件
在文件最后面的
login_footer();
break;
} // end action switch
代码之前添加下面 js 代码:
$(function() {
$('#login #user_pass').focus(function() {
$('#owl-login').addClass('password');
}).blur(function() {
$('#owl-login').removeClass('password');
});
});
然后继续在该文件中搜索下面代码:
<?php bloginfo( 'name' ); ?>
全部替换为:
2、编辑/wp-admin/css目录下的login.min.css文件
用editplus打开该文件后依次选择菜单:文档-自动换行,再将下面的文件粘帖到最后面:
#login #owl-login {
position: absolute;
left: 50%;
margin-left: -111px;
background-image: url("https://dedewp.com/wp-content/uploads/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://dedewp.com/wp-content/uploads/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;
}
下面是上述代码中所需的两个图片素材,右键另存为下载后上传到自己的服务器替换其中的图片地址。
1、素材一
2、素材二
由于 WordPress 自动升级频繁,所以每次自动升级后都需要手动将 login.min.css 中添加的 css 代码重新添加一次。
如果需要和陌小雨一样,给登陆界面添加一个漂亮的背景图,只需要将下面的代码添加到主题 functions.php。
//自定义登录页面背景
function custom_login_head(){
$str=file_get_contents('http://cn.bing.com/HPImageArchive.aspxidx=0&n=1');
if(preg_match("/(.+)/ies",$str,$matches)){
$imgurl='http://cn.bing.com'.$matches[1];
echo'';
}}
add_action('login_head', 'custom_login_head');
add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));
add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));
背景图是每日一换的哦,每一天都是新鲜的。
Android 猫头鹰登录界面,WordPress个性化登陆界面(添加会遮挡双眼的猫头鹰动画)...相关推荐
- 利用JAVA手机登录页面_Java用户登陆界面例子 代码
2,流式布局:FlowLayout.布局方式为从左到右,从上到下.是JPanel(轻量级容器)的默认面板布局. 3,网格布局:GridLayout.布局方式为行和列组成的网络.布局方法:setLayo ...
- asp实现注册登录界面_Win7系统登陆界面修改小技巧--win7w.com
我们都知道登陆界面是可以替换的,长时间使用Win7系统的朋友们都习惯了默认的蓝色登陆界面,虽然说是习惯了,但是相信不少朋友觉得这个界面看上去特别单调,但是Windows 7系统用户现在要想改变他们的登 ...
- 使用WordPress和Tumult Hype添加有效博客文章的动画
This article was sponsored by Tumult. Thank you for supporting the partners who make SitePoint possi ...
- 简单的系统登录设计思路【登陆界面设计】
一.系统权限方案 方案一: 分别设计管理员界面和普通用户界面,对应的登录跳转 方案二: 隐藏管理按钮,,,没有具体方案 二.注册页面 (1)登录跳转, (2)两次输入,确认密码 (3)sql防注入问题 ...
- 手把手教你定制专属的个性化登陆界面,让你的终端更炫酷!
公众号关注 「奇妙的 Linux 世界」 设为「星标」,每天带你提升技术视野! 在我们登入 macOS 的终端后,终端往往会弹出一段欢迎信息,显示登录主机.主机供应商提示等信息.但每次看到的都是同样的 ...
- java登陆界面连接数据库_java 登陆界面怎么写,连接数据库后
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 界面是 package 界面类; import javax.jws.soap.SOAPBinding.Use; import javax.swing.JB ...
- 虚拟机登录时输入密码正确,进入界面后黑屏闪退回登陆界面,死循环问题,已解决
哈喽!我是泡泡! 问题描述 最近安装gp数据库的过程中,发现虚拟机登录会闪退回登陆界面,反复循环,我用的是CentOS7. 搜了好多都说是环境变量的问题,说让修改/etc/profile文件,我修改了 ...
- 软件测试笔记——如何测试登陆界面
通常情况下面试会问到类似的问题,最主要的并不是要说出多么多的测试点,而应该展现的是你的思考方式. 一般对于这类型的问题,会从以下几方面入手:功能.外观.性能.安全.兼容.易用性,当然也可能会有一些特殊 ...
- python登陆成功页面跳转_Python QT由登陆界面到主界面
在使用Python QT开发界面的时候,会出现从登陆界面到主界面的一个切换问题.如下所示,用户输入用户名和密码后,如果用户名和密码匹配,则会跳转到主界面,此时登陆界面消失. 首先需要定义自己需要的对话 ...
最新文章
- 微信小程序全局监听路由变化
- 如何将广告始终定位到网页右下角
- 《百面机器学习》---AI算法工程师求职必备“面经”
- 数组排序方法及C实现的总结
- php编译优化,浅析使用Turck-mmcache编译来加速、优化PHP代码
- 控制台启动jar包关闭控制台怎么关java程序_Jpom一款简而轻的低侵入式Java运维、监控软件...
- 力扣116. 填充每个节点的下一个右侧节点指针(C++,附思路)
- 读取指定文件夹限定文件
- 如何快速验证电子邮件地址?
- 学习OpenCV思维导图
- js让网页标题闪动效果(记)
- jzoj2555 雾雨魔理沙
- WCF基础教程(三)——WCF通信过程及配置文件解析
- 那些年,磕磕碰碰的BUG
- python使用QDA进行二次判别分析
- matlab 实现完整的正弦波信号发生器
- 中国联通联合openGauss开源社区启动数据库自主创新
- 胖客户端与瘦客户端概念与区别
- 客快物流大数据项目(一百一十七):网关 Spring Cloud Gateway
- 机架服务器的系统安装,机架服务器操作系统安装
热门文章
- 基于M5310-A的NB-IoT水表节电方案分享
- 《实用JAVA教程:基于BLUEJ的对象优先方法 第三版》pdf 附下载链接
- 异步API中promise解决回调地狱问题和异步函数async终极解决方案
- DNS—domain name server域名服务器
- SpringBoot测试代码status()、content()、equalTo()无法导入
- 直流稳压电源与信号产生电路(模电速成)
- vue实现手机验证码登录(基于娱乐系统项目)
- JS数组类型,数组的各种方法和操作(后盾人笔记)
- 跨专业学计算机应用好学吗,我是学计算机软件工程的,想跨专业考金融的研 – 手机爱问...
- linux rootfs分区扩容,瑞芯微ROCK960 RK3399烧录image后扩容rootfs