* {
|
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%;
|
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);
|
}
|
}
|
