From 0376a25fbe9cb10b41a09f84cb2f0b07a2c72942 Mon Sep 17 00:00:00 2001 From: zhizous Date: Tue, 14 Apr 2020 21:42:23 +0800 Subject: [PATCH] submit: head --- css/okadmin.css | 96 ++++++++++++++++++++++++++++++++-------- index.html | 3 ++ lib/loading/okLoading.js | 77 ++++++++++++++++---------------- 3 files changed, 120 insertions(+), 56 deletions(-) diff --git a/css/okadmin.css b/css/okadmin.css index 25694e5..3b12091 100644 --- a/css/okadmin.css +++ b/css/okadmin.css @@ -707,14 +707,17 @@ color: #f4f4f4; font-weight: 500; } + .lock-screen .time .hhmmss, .lock-screen .time .yyyymmdd, .lock-screen .quit .layui-icon, -.lock-screen .lock-content p[lock='lock']{ - color: transparent; +.lock-screen .lock-content p[lock='lock'] { + color: #4690FF; + /*color: transparent; background: linear-gradient(to bottom right, #1E9FFF, #6086ff); - -webkit-background-clip: text; + -webkit-background-clip: text;*/ } + .lock-screen .time .hhmmss { font-size: 64px; letter-spacing: 5px; @@ -725,16 +728,15 @@ letter-spacing: 5px; } - - -.lock-screen .quit{ +.lock-screen .quit { position: absolute; z-index: 19; right: 10%; bottom: 10%; transition: all .5s; } -.lock-screen .quit .layui-icon{ + +.lock-screen .quit .layui-icon { font-size: 64px; cursor: pointer; height: 64px; @@ -744,7 +746,8 @@ -webkit-background-clip: text;*/ font-weight: bolder; } -.lock-screen .quit:hover{ + +.lock-screen .quit:hover { transform: scale(1.3); -webkit-transform: scale(1.3); } @@ -758,6 +761,7 @@ background: transparent; box-sizing: border-box; } + .lock-screen .unlock tr, .lock-screen .unlock td { text-align: center; @@ -774,18 +778,59 @@ letter-spacing: 5px; font-family: '微软雅黑', '新宋体', '宋体', arial, tahoma, sans-serif; } -.lock-screen .lock-form{ + +.lock-screen .lock-form { position: relative; - bottom: 50px; + bottom: 64px; } -.lock-screen .lock-form .layui-form-item{ +.unlock{ + /*background: black!important;*/ +} +.unlock .lock-head { + width: 96px; + height: 96px; + padding: 2px; + background: #FFFFFF; + margin: 24px auto; + text-align: center; + border-radius: 100%; + border: 1px solid #FFFFFF; + box-shadow: 0 0 10px #FFFFFF; + overflow: hidden; + animation-name: lock-head; + -webkit-animation-name: lock-head; + + animation-delay: 1s; + -webkit-animation-delay: 1s; + + animation-duration: 2s; + -webkit-animation-duration: 2s; + + animation-timing-function: ease-in-out; /**播放的速度曲线 动画从头到尾的速度是相同的*/ + -webkit-animation-timing-function: ease-in-out; + + animation-iteration-count: infinite; /**无限循环播放*/ + -webkit-animation-iteration-count: infinite; + + animation-direction: alternate; /**规定动画在下一周期逆向地播放*/ + -webkit-animation-direction: alternate; +} + +.unlock .lock-head img { + display: inline-block; + object-fit: cover; + width: 100%; + height: 100%; +} + +.lock-screen .lock-form .layui-form-item { width: 80%; max-width: 450px; margin: 0 auto; } /**雪花*/ -.lock-screen .snowflake{ +.lock-screen .snowflake { position: absolute; z-index: 8; height: 100%; @@ -822,6 +867,16 @@ -webkit-animation-direction: alternate; } +@keyframes lock-head { + 0% { + box-shadow: 0 0 10px #FFFFFF; + } + 100% { + box-shadow: 0 0 30px #FFFFFF; + } + +} + @keyframes lock-gradual { 0% { opacity: 0; @@ -830,31 +885,36 @@ opacity: 1; } } + @keyframes lock-cursor { 0% { - color: transparent; + color: #4690FF; + /*color: transparent; background: linear-gradient(to bottom right, #1E9FFF, #6086ff); - -webkit-background-clip: text; + -webkit-background-clip: text;*/ } 25% { color: transparent; background: transparent; } 50% { - color: transparent; + color: #4690FF; + /*color: transparent; background: linear-gradient(to bottom right, #1E9FFF, #6086ff); - -webkit-background-clip: text; + -webkit-background-clip: text;*/ } 75% { color: transparent; background: transparent; } 100% { - color: transparent; + color: #4690FF; + /*color: transparent; background: linear-gradient(to bottom right, #1E9FFF, #6086ff); - -webkit-background-clip: text; + -webkit-background-clip: text;*/ } } + /**==================锁屏样式 End==================*/ /* diff --git a/index.html b/index.html index 2931ef3..2d3e92b 100644 --- a/index.html +++ b/index.html @@ -186,6 +186,9 @@
+
+ avatar.png +
-
- -
-
`; - } - function headerInit(content, options) { - options = options || {}; - if (typeof content == "string") { - options["content"] = content || ok_load_options.content; - } else if (typeof content == "object") { - options = content; - } - options.time = options.time || ok_load_options.time; - options.content = options.content || ok_load_options.content; - return options; - } + function templateFun(options) { + return "
" + + "
" + + "" + + "
" + + "
"; + } - ok_load_options = headerInit(content, options); - var template = templateFun(ok_load_options); - document.writeln(template); + function headerInit(content, options) { + options = options || {}; + if (typeof content == "string") { + options["content"] = content || ok_load_options.content; + } else if (typeof content == "object") { + options = content; + } + options.time = options.time || ok_load_options.time; + options.content = options.content || ok_load_options.content; + return options; + } + + ok_load_options = headerInit(content, options); + var template = templateFun(ok_load_options); + document.writeln(template); }(); var okLoading = { - close: function (time, dom) { - time = time || ok_load_options.time; - dom = dom || document.getElementsByClassName("ok-loading")[0]; - var setTime1 = setTimeout(function () { - clearTimeout(setTime1); - dom.classList.add("close"); - var setTime2 = setTimeout(function () { - clearTimeout(setTime2); - dom.parentNode.removeChild(dom);/**删除当前节点*/ - }, 800); - }, time); - } + close: function (time, dom) { + time = time || ok_load_options.time; + dom = dom || document.getElementsByClassName("ok-loading")[0]; + var setTime1 = setTimeout(function () { + clearTimeout(setTime1); + dom.classList.add("close"); + var setTime2 = setTimeout(function () { + clearTimeout(setTime2); + dom.parentNode.removeChild(dom);/**删除当前节点*/ + }, 800); + }, time); + } };