submit: head

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']{
+.lock-screen .lock-content p[lock='lock'] {
-    color: transparent;
+    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==================*/
 
 /*

index.html

@@ -186,6 +186,9 @@
          <tr>
             <td>
                <div class="layui-form lock-form">
+                  <div class="lock-head">
+                     <img src="./images/avatar.png" alt="avatar.png" />
+                  </div>
                   <div class="layui-form-item">
                      <div class="layui-col-xs8 layui-col-sm8 layui-col-md8">
                         <input type="password"

lib/loading/okLoading.js

@@ -1,52 +1,53 @@
 var ok_load_options = {
-	time: 1000,
+   time: 1000,
-	content: "ok-admin..."
+   content: "ok-admin..."
 };
 
 !function (content, options) {
-   var config =  localStorage.getItem("okConfig") || window.okConfig || {};
+   var load_config = localStorage.getItem("okConfig") || window.okConfig || {};
 
-   if(typeof config == "string"){
+   if (typeof load_config == "string") {
-      config = JSON.parse(config);
+      load_config = JSON.parse(load_config);
    }
-	function templateFun(options) {
-		return `<div class="ok-loading ${config.theme}">
-						<div class="ball-loader">
-							<span></span><span></span><span></span><span></span>
-						</div>
-				</div>`;
-	}
 
-	function headerInit(content, options) {
+   function templateFun(options) {
-		options = options || {};
+      return "<div class='ok-loading ${config.theme}'>" +
-		if (typeof content == "string") {
+         "<div class='ball-loader'>" +
-			options["content"] = content || ok_load_options.content;
+         "<span></span><span></span><span></span><span></span>" +
-		} else if (typeof content == "object") {
+         "</div>" +
-			options = content;
+         "</div>";
-		}
+   }
-		options.time = options.time || ok_load_options.time;
-		options.content = options.content || ok_load_options.content;
-		return options;
-	}
 
-	ok_load_options = headerInit(content, options);
+   function headerInit(content, options) {
-	var template = templateFun(ok_load_options);
+      options = options || {};
-	document.writeln(template);
+      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) {
+   close: function (time, dom) {
-		time = time || ok_load_options.time;
+      time = time || ok_load_options.time;
-		dom = dom || document.getElementsByClassName("ok-loading")[0];
+      dom = dom || document.getElementsByClassName("ok-loading")[0];
-		var setTime1 = setTimeout(function () {
+      var setTime1 = setTimeout(function () {
-			clearTimeout(setTime1);
+         clearTimeout(setTime1);
-			dom.classList.add("close");
+         dom.classList.add("close");
-			var setTime2 = setTimeout(function () {
+         var setTime2 = setTimeout(function () {
-				clearTimeout(setTime2);
+            clearTimeout(setTime2);
-				dom.parentNode.removeChild(dom);/**删除当前节点*/
+            dom.parentNode.removeChild(dom);/**删除当前节点*/
-			}, 800);
+         }, 800);
-		}, time);
+      }, time);
-	}
+   }
 };