|
#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%;
|
height:400px;
|
border-radius:8px;
|
text-align:center;
|
background: rgba(205, 215, 230, 1);
|
right: 10px;
|
position: absolute;
|
z-index: 1;
|
}
|
|
.buttonClass
|
{
|
width: 90%;
|
border-radius: 50%;
|
overflow: hidden;
|
cursor: pointer;
|
transition: all 0.6s;
|
margin-top: 10px;
|
}
|
.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);
|
}
|
}
|
