WordPress个性化的登录界面

作者:iVampireSP.com 发布日期:2020年8月6日
分类:物语

先上图

这是我最近突发奇想肝出来的一个WordPress登录界面,布局虽然不是很好,但是还是有那么0.01的花里胡哨的

(至少加载速度比原版慢了很多,资源占用也不小

(并且布局时我使用的是px,所以并没有对手机端进行适配。(容我稍后写一下媒体查询)

特点:使用了css3动画,大部分动画都使用纯css3完成。加入了Hitokoto

动画:背景缩放/背景模糊/动态登录框/顶部hitokoto自动刷新

不足:移动端UI不适配,但是可以正常登录。

代码(添加到主题的functions.php即可)

function custom_login() {   
    echo '<style type="text/css">#background{position:fixed;background-image:url(https://imgapi.nwl.im/mix);background-size:100% 100%;background-position:center;width:100%;height:100%;filter:blur(20px);z-index:-10;animation-name:bgimage;animation-duration:30s;animation-iteration-count:infinite}#login{z-index:100;height:565px;width:50%;border-radius:5px;background:rgba(255,255,255,.3);box-shadow:3px 3px 6px 3px rgba(0,0,0,.3);position:fixed;top:10%;left:24.5%;padding:unset;animation-name:login-body;animation-duration:1.5s;animation-iteration-count:1}.login form{width:260px;background:rgba(255,255,255,.3);border-radius:5px;border:unset;margin:0 auto;margin-top:10px;animation-name:login-form;animation-duration:1.5s;animation-iteration-count:1}.login #nav{margin:unset;position:relative;top:10px;left:32%}.login #backtoblog{padding:unset;position:relative;top:5px;left:34.5%}.login *{margin:revert}h2{font-size:1.9em;text-align:center;height:40px;display:block;animation-name:typeing;animation-duration:20s;animation-iteration-count:infinite}@keyframes typeing{0%{color:#444}50%{color:#fdeeee}100%{color:#444}}@keyframes login-body{0%{width:0;height:0}100%{width:50%;height:565px}}@keyframes login-form{0%{width:0;height:0}100%{width:260px;height:38%}}@keyframes bgimage{0%{background-size:100% 100%;filter:blur(20px)}50%{background-size:200% 200%;filter:blur(0px)}100%{background-size:100% 100%;filter:blur(20px)}}</style>';
}
function custom_login_footer() {
    echo '<script type="text/javascript">var vcurrent=document.getElementById("login");var newNodeTop=document.createElement("div");newNodeTop.id="background";vcurrent.parentNode.insertBefore(newNodeTop,vcurrent);var vcurrent1=document.getElementsByTagName("h1")[0];var newNodeTop1=document.createElement("h2");newNodeTop1.id="hitokoto";vcurrent.insertBefore(newNodeTop1,vcurrent1);var t2=window.setInterval("hitokoto()",10000);function hitokoto(){var xhr=new XMLHttpRequest();xhr.open("get","https://v1.hitokoto.cn");xhr.onreadystatechange=function(){if(xhr.readyState===4){var data=JSON.parse(xhr.responseText);let divTyping=document.getElementById("hitokoto");let i=0,timer=0,str=data.hitokoto;function typing(){if(i<=str.length){divTyping.innerHTML=str.slice(0,i++)+"_";timer=setTimeout(typing,200)}else{divTyping.innerHTML=str;clearTimeout(timer)}}typing()}}
    xhr.send()}</script>';
}
add_action('login_head', 'custom_login');   
add_action('login_footer', 'custom_login_footer');   
标签: ,

下一篇

《贤惠幼妻仙狐小姐》随机图片

"WordPress个性化的登录界面"
中有2条评论

  1. Au说道:

    大佬?带我!

留下足迹

Crafted with love by iVampireSP.com