WordPress 个性化的登录界面

先上图

这是我最近突发奇想肝出来的一个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');   

评论

  1. 3年前
    2021-3-08 19:56:25

    很好借鉴了

  2. Au
    4年前
    2020-8-06 16:04:31

    大佬?带我!

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇