You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
2.5 KiB
CSS
140 lines
2.5 KiB
CSS
body{ font-family: "Lucida Console", Monaco, monospace; }
|
|
|
|
p { font-size: 20px; }
|
|
|
|
a{ text-decoration: none; }
|
|
|
|
#space-time{
|
|
position: relative;
|
|
width: 1000px;
|
|
height: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#ilinx{
|
|
position: absolute;
|
|
width: 300px;
|
|
left: 446px;
|
|
top: 461px;
|
|
}
|
|
|
|
.ilinx {
|
|
font-size: 35px;
|
|
margin-top: -2px;
|
|
float:left;
|
|
cursor: grab;
|
|
}
|
|
|
|
#spiral {
|
|
width: 300px;
|
|
position: absolute;
|
|
margin-top: -150px;
|
|
margin-left: -150px;
|
|
top: 300px;
|
|
left: 500px;
|
|
}
|
|
|
|
.rotating {
|
|
-webkit-animation: rotating 3s linear infinite;
|
|
-moz-animation: rotating 3s linear infinite;
|
|
-ms-animation: rotating 3s linear infinite;
|
|
-o-animation: rotating 3s linear infinite;
|
|
animation: rotating 3s linear infinite;
|
|
}
|
|
|
|
#islands{
|
|
|
|
}
|
|
|
|
a.island:link{color:white;}
|
|
a.island:hover{color: red;
|
|
-webkit-animation: breathe 3s linear infinite;
|
|
-moz-animation: breathe 3s linear infinite;
|
|
-ms-animation: breathe 3s linear infinite;
|
|
-o-animation: breathe 3s linear infinite;
|
|
animation: breathe 3s linear infinite;
|
|
}
|
|
a.island:visited{color: white;}
|
|
|
|
#lemuria {
|
|
position: absolute;
|
|
left: 267px;
|
|
top:300px;
|
|
|
|
}
|
|
|
|
#mu {
|
|
position: absolute;
|
|
left: 378px;
|
|
top:131px;
|
|
|
|
}
|
|
|
|
#hyperborea {
|
|
position: absolute;
|
|
left: 626px;
|
|
top:174px;
|
|
|
|
}
|
|
|
|
#thule{
|
|
position: absolute;
|
|
left: 630px;
|
|
top:360px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Rotate loop */
|
|
|
|
@-webkit-keyframes rotating /* Safari and Chrome */ {
|
|
from {
|
|
-webkit-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes rotating {
|
|
from {
|
|
-ms-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-ms-transform: rotate(360deg);
|
|
-moz-transform: rotate(360deg);
|
|
-webkit-transform: rotate(360deg);
|
|
-o-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
|
|
/* Breathing text */
|
|
|
|
@-webkit-keyframes breathe /* Safari and Chrome */ {
|
|
0% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;}
|
|
50% {font-size:21px; color: red; letter-spacing: 1px; margin-left: -6px;}
|
|
100% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;}
|
|
}
|
|
@keyframes breathe {
|
|
0% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;}
|
|
50% {font-size:21px; color: red; letter-spacing: 1px; margin-left: -6px;}
|
|
100% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;}
|
|
} |