#

luxiaotao1123

2023-03-21 059270c12f452fcc3344b826f35295fd7c20906e

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