#

luxiaotao1123

2023-03-21 059270c12f452fcc3344b826f35295fd7c20906e

 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);
}