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 | 364 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 364 insertions(+), 0 deletions(-)
diff --git a/static/css/index.css b/static/css/index.css
index ec1f177..7036794 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,3 +1,349 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+html {
+ height: 100%;
+}
+body {
+ height: 100%;
+}
+
+#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: #f1f1f1;
+ 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;
+ transition:all 1000ms;
+}
+.ship-info-box .speed.pointernone.hide {
+ opacity: 0;
+}
+.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-lock {
+ transition:all 300ms;
+ position:absolute;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ background-color:rgba(0,0,0,0.2);
+ 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-lock {
+ 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);
+}
+
+.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 {
+ position:absolute;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ z-index:1;
+}
+
+
+
+
+
+
+
+
+
+.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);
+}
+
+
+
+
+
+
+
+
+
+
.sidebar {
margin-top:100px;
width: 1.5%;
@@ -22,3 +368,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