From 059270c12f452fcc3344b826f35295fd7c20906e Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 21 三月 2023 08:31:37 +0800
Subject: [PATCH] #

---
 static/css/index.css |  181 +++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 174 insertions(+), 7 deletions(-)

diff --git a/static/css/index.css b/static/css/index.css
index 53f0b8c..7036794 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,3 +1,13 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+html {
+    height: 100%;
+}
+body {
+    height: 100%;
+}
 
 #mask {
     background-color:#222;
@@ -16,7 +26,7 @@
     text-align:center;
     z-index:100;
     padding:20px;
-    color:#ccc;
+    color: #f1f1f1;
     font-size:12px;
 }
 .ship-info-box .ship-type {
@@ -38,6 +48,10 @@
 .ship-info-box .speed {
     font-size:12px;
     color:#00ff00;
+    transition:all 1000ms;
+}
+.ship-info-box .speed.pointernone.hide {
+    opacity: 0;
 }
 .ship-info-box .speed span {
     color:#fff;
@@ -53,14 +67,14 @@
     text-align:center;
     margin-top:10px;
 }
-.ship-info-box .btn .btn-back {
+.ship-info-box .btn #btn-lock {
     transition:all 300ms;
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
-    background-color:rgba(0,0,0,0.3);
+    background-color:rgba(0,0,0,0.2);
     transform:scale(1,0);
 }
 .ship-info-box .btn .btn-word {
@@ -71,7 +85,7 @@
     width:100%;
     height:100%;
     transform:translateX(15px);
-    color:#ccc;
+    /*color:#ccc;*/
     z-index:2;
     text-align:center;
     opacity:0;
@@ -100,7 +114,7 @@
 .ship-info-box .btn.show {
     cursor:pointer;
 }
-.ship-info-box .btn.show .btn-back {
+.ship-info-box .btn.show #btn-lock {
     transform:scale(1,1);
 }
 .ship-info-box .btn.show .btn-word {
@@ -146,7 +160,71 @@
     transform:translate(0,0);
 }
 
-
+.title-box {
+    position:absolute;
+    top:40%;
+    left:8%;
+    transform:translateY(-50%);
+    color:#fff;
+    z-index:2;
+    pointer-events:none;
+}
+.title-box .title {
+    font-size:36px;
+    perspective:600px;
+    -webkit-perspective:600px;
+    -moz-perspective:600px;
+}
+.title-box .title i {
+    display:inline-block;
+    font-style:normal;
+    opacity:0;
+    transform:rotateY(90deg);
+    transition:all 5000ms;
+    transform-style:preserve-3d;
+    -webkit-transform-style:preserve-3d;
+}
+.title-box.show .title i {
+    opacity:1;
+    transform:rotateY(0);
+}
+.title-box.show .say {
+    opacity:1;
+    transform:translateX(0);
+}
+.title-box .say {
+    font-size:12px;
+    color: #b8b8b8;
+    padding:20px 0 20px 40px;
+    opacity:0;
+    transform:translateX(20px);
+    transition:all 2000ms;
+    transition-delay:2000ms;
+}
+.title-box.show .use {
+    opacity:1;
+    transform:translateY(0);
+}
+.title-box .say p {
+    padding:0;
+}
+.title-box .use {
+    font-size:14px;
+    color:#fff;
+    display:flex;
+    align-items:center;
+    padding-left:40px;
+    opacity:0;
+    transform:translateY(20px);
+    transition:all 2000ms;
+    transition-delay:2000ms;
+}
+.title-box .use div {
+    height:1px;
+    background-color:#fff;
+    width:80px;
+    margin-right:10px;
+}
 
 
 #container {
@@ -166,7 +244,96 @@
 
 
 
-
+.menu {
+    position:fixed;
+    top:50%;
+    right:20px;
+    transform:translateY(-50%);
+    z-index:20;
+    display:block;
+    margin:0;
+    padding:0;
+}
+.menu > li {
+    position:relative;
+    width:20px;
+    height:30px;
+    line-height:20px;
+    font-size:12px;
+    color:#fff;
+    text-align:center;
+    transform:translateX(50px) translateY(25px);
+    padding:0;
+    display:block;
+    margin-bottom:10px;
+    cursor:pointer;
+}
+.menu > li > div {
+    position:relative;
+    width:20px;
+    height:20px;
+    transform:rotate(45deg);
+    transition:all 300ms;
+}
+.menu > li:first-child {
+    transition:all 200ms;
+}
+.menu > li:nth-child(2) {
+    transition:all 500ms;
+}
+.menu > li:nth-child(3) {
+    transition:all 800ms;
+}
+.menu > li:nth-child(4) {
+    transition:all 800ms;
+}
+.menu.show > li {
+    transform:translateX(0) translateY(0);
+    opacity:1;
+}
+.menu li > div::before {
+    content:"";
+    position:absolute;
+    top:0;
+    left:0;
+    width:19px;
+    height:19px;
+    border-top:solid 1px #fff;
+    border-left:solid 1px #fff;
+    transition:all 300ms;
+}
+.menu li > div::after {
+    content:"";
+    position:absolute;
+    bottom:0;
+    right:0;
+    width:19px;
+    height:19px;
+    border-bottom:solid 1px #fff;
+    border-right:solid 1px #fff;
+    transition:all 300ms;
+}
+.menu > li > div > div {
+    transform:rotate(-45deg);
+}
+.menu li:hover > div {
+    transform:rotate(0) !important;
+}
+.menu li:hover > div::before {
+    width:5px;
+    height:5px;
+    border-top:solid 1px #0f0;
+    border-left:solid 1px #0f0;
+}
+.menu li:hover > div::after {
+    width:5px;
+    height:5px;
+    border-bottom:solid 1px #0f0;
+    border-right:solid 1px #0f0;
+}
+.menu li:hover > div > div {
+    transform:rotate(0);
+}
 
 
 

--
Gitblit v1.9.1