submit: 锁屏

css/okadmin.css

@@ -3,6 +3,7 @@
 @import "./okadmin.theme.css";
 @import "./okadmin.animate.css";
 @import "../lib/layui/css/okmodules/jquery.contextMenu.css";
+
 /*html{
     webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
@@ -17,6 +18,7 @@
     padding-top: 20px;
     padding-bottom: 20px;
 }
+
 .ptb10 {
     padding-top: 10px;
     padding-bottom: 10px;
@@ -391,6 +393,7 @@
 .ok-tab {
     background: #F5F7F9;
 }
+
 .okadmin-pagetabs {
     padding: 0 80px 0 40px;
     background-color: transparent;
@@ -399,6 +402,7 @@
     height: 40px;
     z-index: 1;
 }
+
 .okadmin-tabs-control {
     height: 32px;
     line-height: 32px;
@@ -416,20 +420,25 @@
     /*background: #FFF;*/
     z-index: 10;
 }
+
 .okadmin-tabs-control:hover {
     /*background: #F2F2F2;*/
     color: #009688;
 }
+
 .ok-tab .move-left {
     left: 0;
     border-left: none;
 }
+
 .ok-tab .move-right {
     right: 40px;
 }
+
 .layui-icon-down {
     right: 0;
 }
+
 .okadmin-tabs-select.layui-nav {
     position: absolute;
     left: 0;
@@ -445,6 +454,7 @@
 .okadmin-tab a {
     cursor: pointer;
 }
+
 .ok-right-nav-menu {
     top: 0;
     right: 0;
@@ -455,11 +465,13 @@
     display: flex;
     align-items: center;
 }
+
 .okadmin-tab {
     height: 32px;
     line-height: 32px;
     width: 32px;
 }
+
 .okadmin-tab .okadmin-tab-item .okadmin-link {
     display: block;
     width: 100%;
@@ -495,9 +507,11 @@
     -webkit-transition: all .3s;
     font-size: 14px;
 }
+
 .okadmin-tab .okadmin-tab-item a:hover {
     background: #F5F7F9;
 }
+
 .okadmin-tab .okadmin-tab-item .okadmin-tab-child:visited {
     display: none !important;
 }
@@ -514,6 +528,7 @@
     line-height: 40px;
     border: 0;
 }
+
 .ok-tab .layui-tab-title li {
     height: 32px;
     line-height: 32px;
@@ -521,6 +536,7 @@
     border-radius: 3px;
     margin-right: 15px;
 }
+
 .ok-tab .layui-tab-brief > .layui-tab-more li.layui-this,
 .ok-tab .layui-tab-brief > .layui-tab-title .layui-this,
 .ok-tab .layui-tab-title li.layui-this {
@@ -653,6 +669,7 @@
     background: #0C0C0C;
     display: none;
 }
+
 .lock-screen .lock-bg {
     height: 100%;
     width: 100%;
@@ -663,15 +680,18 @@
     bottom: 0;
     top: 0;
 }
+
 .lock-screen .lock-bg img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     display: none;
 }
+
 .lock-screen .lock-bg img.active {
     display: block;
 }
+
 .lock-screen .lock-content {
     height: 100%;
     width: 100%;
@@ -679,6 +699,7 @@
     position: relative;
     z-index: 9;
 }
+
 .lock-screen .time {
     position: absolute;
     top: 10%;
@@ -686,14 +707,17 @@
     color: #f4f4f4;
     font-weight: 500;
 }
+
 .lock-screen .time .hhmmss {
     font-size: 64px;
     letter-spacing: 5px;
 }
+
 .lock-screen .time .yyyymmdd {
     font-size: 32px;
     letter-spacing: 5px;
 }
+
 .lock-screen .unlock {
     height: 100%;
     width: 100%;
@@ -702,11 +726,13 @@
     color: #f4f4f4;
     background: transparent;
 }
+
 .lock-screen .unlock tr,
 .lock-screen .unlock td {
     text-align: center;
     align-content: center;
 }
+
 .lock-screen .unlock .lock-text {
     font-size: 42px;
     font-weight: bolder;
@@ -718,6 +744,62 @@
     font-family: '微软雅黑', '新宋体', '宋体', arial, tahoma, sans-serif;
 }
 
+.lock-screen .lock-content p[lock='lock'] {
+    display: inline-block;
+    animation-name: lock-cursor;
+    -webkit-animation-name: lock-cursor;
+
+    animation-duration: 2s;
+    -webkit-animation-duration: 2s;
+
+    animation-iteration-count: infinite; /**无限循环播放*/
+    -webkit-animation-iteration-count: infinite;
+
+}
+
+.lock-gradual {
+    animation-name: lock-gradual;
+    -webkit-animation-name: lock-gradual;
+
+    animation-duration: 4s;
+    -webkit-animation-duration: 4s;
+
+    animation-iteration-count: infinite; /**无限循环播放*/
+    -webkit-animation-iteration-count: infinite;
+
+    animation-timing-function: linear; /**播放的速度曲线 动画从头到尾的速度是相同的*/
+    -webkit-animation-timing-function: linear;
+
+    animation-direction: alternate; /**规定动画在下一周期逆向地播放*/
+    -webkit-animation-direction: alternate;
+}
+
+@keyframes lock-gradual {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+@keyframes lock-cursor {
+    0% {
+        color: white;
+    }
+    25% {
+        color: transparent;
+    }
+    50% {
+        color: white;
+    }
+    75% {
+        color: transparent;
+    }
+    100% {
+        color: white;
+    }
+}
+
 /*
 * 以下都是移动端的处理响应
 */

index.html

@@ -159,13 +159,13 @@
 <!-- 锁屏 -->
 <div class="lock-screen">
    <div class="lock-bg">
-      <img class="active gradual" src="./images/wallpaper/9f28afe0e71b3ba8778e307bea2f006K.jpg" alt="" />
+      <img class="active lock-gradual" src="./images/wallpaper/9f28afe0e71b3ba8778e307bea2f006K.jpg" alt="" />
-      <img class="gradual" src="./images/wallpaper/9f28afe0e71b3ba8778e307bea2f006d.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/9f28afe0e71b3ba8778e307bea2f006d.jpg" alt="" />
-      <img class="gradual" src="./images/wallpaper/29bce2d5cf30fc96866dcb5e287661ea.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/29bce2d5cf30fc96866dcb5e287661ea.jpg" alt="" />
-      <img class="gradual" src="./images/wallpaper/b4b55f8ec6b2763a737a2d6e1c50b71e.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/b4b55f8ec6b2763a737a2d6e1c50b71e.jpg" alt="" />
-      <img class="gradual" src="./images/wallpaper/b8df65c6452dcf8b0302b8bfce9e7ec9.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/b8df65c6452dcf8b0302b8bfce9e7ec9.jpg" alt="" />
-      <img class="gradual" src="./images/wallpaper/b390e4c33b7d656f09dc7fd155759a4f.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/b390e4c33b7d656f09dc7fd155759a4f.jpg" alt="" />
-      <img class="duration-1s ok-anim heartBeat" src="./images/wallpaper/e1739f3b0f386e719bd4b4503fd3cc3a.jpg" alt="" />
+      <img class="lock-gradual" src="./images/wallpaper/3fded2e777723f145a4773dfdb68a9e3.jpg" alt="" />
    </div>
    <div class="lock-content">
       <div class="time">

js/okadmin.js

@@ -20,7 +20,8 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
    });
    var config = okUtils.local("okConfig") || okConfig || {};
    objOkTab = okTab;
-   okLoading && okLoading.close();/**关闭加载动画*/
+   okLoading && okLoading.close();
+   /**关闭加载动画*/
 
    $(".layui-layout-admin").removeClass("orange_theme blue_theme");
    $(".layui-layout-admin").addClass(config.theme);
@@ -364,18 +365,25 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
          });*/
       });
    });
+   $(".lock-screen").show();
+   lockInit(okUtils);
+
    /**锁屏内容*/
    function lockInit(okUtils) {
       var lock_bgs = $(".lock-screen .lock-bg img");
-      var fmt = okUtils.dateFormat("","yyyy 年 M 月 s 日");
+      $(".lock-content .time .hhmmss").html(okUtils.dateFormat("", "hh <p lock='lock'>:</p> mm"));
-      var hhmmss = okUtils.dateFormat("","hh : mm");
+      $(".lock-content .time .yyyymmdd").html(okUtils.dateFormat("", "yyyy 年 M 月 dd 日"));
-      $(".lock-content .time .hhmmss").html(hhmmss);
+      var i = 0, k = 0;
-      $(".lock-content .time .yyyymmdd").html(fmt);
       lock_inter = setInterval(function () {
-         var random_num = Math.floor( Math.random()*lock_bgs.length);
+         i++;
+         if (i % 8 == 0) {
+            k = k + 1 >= lock_bgs.length ? 0 : k + 1;
+            i = 0;
             lock_bgs.removeClass("active");
-         $(lock_bgs[random_num]).addClass("active");
+            $(lock_bgs[k]).addClass("active");
-      },5000);
+         }
+         $(".lock-content .time .hhmmss").html(okUtils.dateFormat("", "hh <p lock='lock'>:</p> mm"));
+      }, 1000);
    }
 
    console.log("        __                         .___      .__        \n" +