From 39ea49edce74ae063ca0afd9b2966f861e256a3e Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Tue, 17 Apr 2018 13:18:36 +0800 Subject: [PATCH] ts fix,组织报警间隔时间设置 --- src/index.html | 110 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 101 insertions(+), 9 deletions(-) diff --git a/src/index.html b/src/index.html index e96f22e..04af5b5 100644 --- a/src/index.html +++ b/src/index.html @@ -8,9 +8,101 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="icon" type="image/x-icon" href="favicon.ico"> - <!-- Apple Touch Icon --> - <!-- <link rel="apple-touch-icon" href="custom-icon.png"> --> - <style type="text/css">.preloader{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#49a9ee;z-index:9999;transition:opacity .65s}.preloader-hidden-add{opacity:1;display:block}.preloader-hidden-add-active{opacity:0}.preloader-hidden{display:none}.cs-loader{position:absolute;top:0;left:0;height:100%;width:100%}.cs-loader-inner{transform:translateY(-50%);top:50%;position:absolute;width:100%;color:#fff;text-align:center}.cs-loader-inner label{font-size:20px;opacity:0;display:inline-block}@keyframes lol{0%{opacity:0;transform:translateX(-300px)}33%{opacity:1;transform:translateX(0)}66%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(300px)}}.cs-loader-inner label:nth-child(6){animation:lol 3s infinite ease-in-out}.cs-loader-inner label:nth-child(5){animation:lol 3s .1s infinite ease-in-out}.cs-loader-inner label:nth-child(4){animation:lol 3s .2s infinite ease-in-out}.cs-loader-inner label:nth-child(3){animation:lol 3s .3s infinite ease-in-out}.cs-loader-inner label:nth-child(2){animation:lol 3s .4s infinite ease-in-out}.cs-loader-inner label:nth-child(1){animation:lol 3s .5s infinite ease-in-out}</style> + <!-- Apple Touch Icon --> + <!-- <link rel="apple-touch-icon" href="custom-icon.png"> --> + <style type="text/css"> + .preloader { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + background: #49a9ee; + z-index: 9999; + transition: opacity 0.65s; + } + + .preloader-hidden-add { + opacity: 1; + display: block; + } + + .preloader-hidden-add-active { + opacity: 0; + } + + .preloader-hidden { + display: none; + } + + .cs-loader { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + } + + .cs-loader-inner { + transform: translateY(-50%); + top: 50%; + position: absolute; + width: 100%; + color: #fff; + text-align: center; + } + + .cs-loader-inner label { + font-size: 20px; + opacity: 0; + display: inline-block; + } + + @keyframes lol { + 0% { + opacity: 0; + transform: translateX(-300px); + } + 33% { + opacity: 1; + transform: translateX(0); + } + 66% { + opacity: 1; + transform: translateX(0); + } + 100% { + opacity: 0; + transform: translateX(300px); + } + } + + .cs-loader-inner label:nth-child(6) { + animation: lol 3s infinite ease-in-out; + } + + .cs-loader-inner label:nth-child(5) { + animation: lol 3s .1s infinite ease-in-out; + } + + .cs-loader-inner label:nth-child(4) { + animation: lol 3s .2s infinite ease-in-out; + } + + .cs-loader-inner label:nth-child(3) { + animation: lol 3s .3s infinite ease-in-out; + } + + .cs-loader-inner label:nth-child(2) { + animation: lol 3s .4s infinite ease-in-out; + } + + .cs-loader-inner label:nth-child(1) { + animation: lol 3s .5s infinite ease-in-out; + } + + </style> </head> <body> @@ -18,12 +110,12 @@ <div class="preloader"> <div class="cs-loader"> <div class="cs-loader-inner"> - <label> ���</label> - <label> ���</label> - <label> ���</label> - <label> ���</label> - <label> ���</label> - <label> ���</label> + <label> ���</label> + <label> ���</label> + <label> ���</label> + <label> ���</label> + <label> ���</label> + <label> ���</label> </div> </div> </div> -- Gitblit v1.8.0