CSS

语言：

CSSSCSS

确定

html,

body {

position: relative;

height: 100%;

font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

}

body {

background: #222;

}

body:before {

content: 'Loading...';

position: absolute;

top: 50%;

left: 0%;

width: 100%;

text-align: center;

color: #fff;

}

body.data-loaded {

background: #fff;

}

body.data-loaded:before {

display: none;

}

.gradients {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

div[class^="canvas"] {

width: 100%;

height: 100%;

position: absolute;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

top: 0;

left: 0;

opacity: 0;

-webkit-transition: all ease 300ms;

transition: all ease 300ms;

}

div[class^="canvas"].active {

opacity: 1;

}

.title-block {

position: relative;

display: inline;

opacity: 0;

-webkit-transition: all ease 300ms;

transition: all ease 300ms;

}

.title-block a:not(#title) {

display: block;

position: absolute;

width: 33px;

height: 20px;

-webkit-transition: all ease 300ms;

transition: all ease 300ms;

}

.title-block a:not(#title):before,

.title-block a:not(#title):after {

content: '';

width: 20px;

height: 4px;

background: white;

position: absolute;

top: 8px;

left: 0;

-webkit-transition: all ease 300ms;

transition: all ease 300ms;

box-shadow: 0px 0px 2px black;

}

.title-block a:not(#title):before {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

left: 11px;

}

.title-block a:not(#title):after {

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.title-block .up {

top: -3em;

left: calc(50% - 20px);

}

.title-block .up.move {

top: -4em;

}

.title-block .down {

bottom: -3em;

left: calc(50% - 20px);

-webkit-transform: rotate(-180deg);

transform: rotate(-180deg);

}

.title-block .down.move {

bottom: -4em;

}

.title-block .right {

top: calc( 50% - 11px);

right: -3em;

-webkit-transform: rotate(-270deg);

transform: rotate(-270deg);

}

.title-block .right.move {

right: -4em;

}

.title-block .left {

top: calc( 50% - 11px);

left: -3em;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

.title-block .left.move {

left: -4em;

}

.title-block:hover #title {

color: white;

}

.title-block.active {

opacity: 1;

}

#title {

text-decoration: none;

position: relative;

font-family: 'Montserrat', sans-serif;

font-size: 3rem;

text-transform: uppercase;

text-align: center;

letter-spacing: 1px;

color: rgba(255, 255, 255, 0.9);

-webkit-transition: all ease 350ms;

transition: all ease 350ms;

text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4), 1px 5px 8px rgba(0, 0, 0, 0.3), 1px 10px 12px rgba(0, 0, 0, 0.1);

}

#title.active {

opacity: 1;

}

#title:hover {

letter-spacing: 5px;

}

.colours {

width: calc(100% - 4em);

padding: 0 2em;

position: fixed;

bottom: 2em;

z-index: 1;

}

.colours span {

font-size: 0.75em;

color: #fff;

letter-spacing: 1px;

text-shadow: 1px 1px 1px black;

text-transform: uppercase;

padding: 1em;

background: rgba(255, 255, 255, 0);

border-radius: 10px;

-webkit-transition: all ease 300ms;

transition: all ease 300ms;

}

.colours span:hover {

background: rgba(255, 255, 255, 0.7);

color: #000;

text-shadow: 1px 1px 1px transparent;

}

.colours #colour-1 {

float: left;

}

.colours #colour-2 {

float: right;

}

.hint-container {

position: fixed;

bottom: 10vh;

width: 100%;

text-align: center;

-webkit-transition: all linear 500ms;

transition: all linear 500ms;

opacity: 0;

}

.hint-container .hint {

display: inline-block;

border-radius: 8px;

padding: 0.5em 0.75em;

background: rgba(33, 33, 33, 0.5);

color: #fff;

}

.hint-container.used {

opacity: 0;

}

.title-block.active + .hint-container:not(.used) {

opacity: 1;

}