From efa7b6d79650d2f6813071b49f02ccce94c03f86 Mon Sep 17 00:00:00 2001 From: xufenglei <xufenglei> Date: Fri, 20 Jul 2018 16:18:10 +0800 Subject: [PATCH] 图例 高度调整 --- src/index.html | 126 +++++++++++++++++++++++++++++++++++++++-- 1 files changed, 118 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index 403d282..04af5b5 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,124 @@ <!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>ScreenFrontend</title> - <base href="/"> +<html> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="icon" type="image/x-icon" href="favicon.ico"> +<head> + <meta charset="utf-8"> + <title>������������������������</title> + <base href="/"> + <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 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> - <app-root></app-root> + <app-root></app-root> + <div class="preloader"> + <div class="cs-loader"> + <div class="cs-loader-inner"> + <label> ���</label> + <label> ���</label> + <label> ���</label> + <label> ���</label> + <label> ���</label> + <label> ���</label> + </div> + </div> + </div> </body> + </html> -- Gitblit v1.8.0