From f91133296e15158d69d4af21b8b5ed363d29ea75 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@63.com>
Date: 星期二, 21 十二月 2021 12:25:57 +0800
Subject: [PATCH] #
---
static/css/index.css | 197 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 197 insertions(+), 0 deletions(-)
diff --git a/static/css/index.css b/static/css/index.css
index ec1f177..53f0b8c 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,3 +1,182 @@
+
+#mask {
+ background-color:#222;
+ position:fixed;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ z-index:99;
+}
+.ship-info-box {
+ position:fixed;
+ top:55%;
+ left:50%;
+ transform:translateX(-50%);
+ text-align:center;
+ z-index:100;
+ padding:20px;
+ color:#ccc;
+ font-size:12px;
+}
+.ship-info-box .ship-type {
+ height:20px;
+ line-height:20px;
+ overflow:hidden;
+}
+.ship-info-box .ship-type ul {
+ display:block;
+ margin:0;
+ padding:0;
+ transition:all 300ms;
+}
+.ship-info-box .ship-type ul > li {
+ display:block;
+ height:20px;
+ line-height:20px;
+}
+.ship-info-box .speed {
+ font-size:12px;
+ color:#00ff00;
+}
+.ship-info-box .speed span {
+ color:#fff;
+}
+.ship-info-box .speed i {
+ font-style:normal;
+}
+.ship-info-box .btn {
+ position:relative;
+ width:150px;
+ height:30px;
+ line-height:30px;
+ text-align:center;
+ margin-top:10px;
+}
+.ship-info-box .btn .btn-back {
+ transition:all 300ms;
+ position:absolute;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ background-color:rgba(0,0,0,0.3);
+ transform:scale(1,0);
+}
+.ship-info-box .btn .btn-word {
+ transition:all 600ms;
+ position:absolute;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ transform:translateX(15px);
+ color:#ccc;
+ z-index:2;
+ text-align:center;
+ opacity:0;
+}
+.ship-info-box .btn .line {
+ z-index:2;
+ transition:all 300ms;
+ width:10px;
+ height:10px;
+ position:absolute;
+ transform:scale(0,0);
+ opacity:0;
+}
+.ship-info-box .btn .line1 {
+ top:0;
+ left:0;
+ border-top:solid 1px #00ff00;
+ border-left:solid 1px #00ff00;
+}
+.ship-info-box .btn .line2 {
+ bottom:0;
+ right:0;
+ border-bottom:solid 1px #00ff00;
+ border-right:solid 1px #00ff00;
+}
+.ship-info-box .btn.show {
+ cursor:pointer;
+}
+.ship-info-box .btn.show .btn-back {
+ transform:scale(1,1);
+}
+.ship-info-box .btn.show .btn-word {
+ transform:translateX(0px);
+ opacity:1;
+}
+.ship-info-box .btn.show .line {
+ transform:scale(1,1);
+ opacity:1;
+}
+.ship-info-box .btn:hover .line {
+ width:30px;
+ height:15px;
+}
+.ship-info-box .remind {
+ font-size:12px;
+ color:#00ff00;
+ opacity:0;
+ transition:all 300ms;
+ transform:translateY(15px);
+}
+.ship-info-box .remind.show {
+ opacity:1;
+ transform:translateY(0);
+}
+
+.logo {
+ position:fixed;
+ /*opacity:0.7;*/
+ opacity: 1;
+ top:50vh;
+ left:50vw;
+ width:120px;
+ height:auto;
+ transform:translate(-50%,-50%);
+ z-index:100;
+ transition:all 1000ms;
+}
+.logo.show {
+ top:1vw;
+ left:1vw;
+ width:80px;
+ transform:translate(0,0);
+}
+
+
+
+
+#container {
+ position:absolute;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ z-index:1;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
.sidebar {
margin-top:100px;
width: 1.5%;
@@ -22,3 +201,21 @@
.buttonClass:hover{
transform: scale(1.2);
}
+
+
+@media all and (max-width:768px) {
+ .logo {
+ top:25vh;
+ left:50vw;
+ width:80px;
+ height:auto;
+ transform:translate(-50%,-50%);
+ transition:all 800ms;
+ }
+ .logo.show {
+ top:1vw;
+ left:1vw;
+ width:50px;
+ transform:translate(0,0);
+ }
+}
--
Gitblit v1.9.1