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 | 172 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 168 insertions(+), 4 deletions(-)
diff --git a/static/css/index.css b/static/css/index.css
index 4317dcc..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 {
@@ -64,7 +74,7 @@
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 {
@@ -75,7 +85,7 @@
width:100%;
height:100%;
transform:translateX(15px);
- color:#ccc;
+ /*color:#ccc;*/
z-index:2;
text-align:center;
opacity:0;
@@ -150,6 +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 {
@@ -169,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