322 lines
7.6 KiB
CSS
322 lines
7.6 KiB
CSS
|
|
*{
|
|
margin:0em;
|
|
padding:0em;
|
|
}
|
|
|
|
body {
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
background: #403833;
|
|
font-family: 'Open Sans';
|
|
font-weight: 100;
|
|
color:#f2f2f2;
|
|
font-size:100%;
|
|
margin:0em;
|
|
padding:0em;
|
|
}
|
|
|
|
/* Start the loader code, first, let's align it the center of screen */
|
|
.loader {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-moz-transform: translate(-50%, -50%);
|
|
-mos-transform: translate(-50%, -50%);
|
|
-o-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
text-align:center;
|
|
/* disable selection and cursor changes */
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
cursor:default;
|
|
}
|
|
|
|
/* Text align it the center of screen and connect the looped animation for 2 seconds */
|
|
.text{
|
|
position: absolute;
|
|
left: -1.3em;
|
|
top: -1.7em;
|
|
-webkit-animation: text 2s infinite;
|
|
-moz-animation: text 2s infinite;
|
|
-moz-animation: text 2s infinite;
|
|
-ms-animation: text 2s infinite;
|
|
-o-animation: text 2s infinite;
|
|
animation: text 2s infinite;
|
|
}
|
|
|
|
/* Set for the first layer vertical position */
|
|
.vertical{
|
|
position:absolute;
|
|
top: -1.84em;
|
|
left: -0.4em;
|
|
-webkit-transform: rotate(90deg);
|
|
-moz-transform: rotate(90deg);
|
|
-ms-transform: rotate(90deg);
|
|
-o-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Set for the second layer horizontal position */
|
|
.horizontal{
|
|
position:absolute;
|
|
top:0em;
|
|
left:0em;
|
|
-webkit-transform: rotate(0deg);
|
|
-moz-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
/* The next two classes do mirror for animation */
|
|
.circlesup{
|
|
position:absolute;
|
|
top: -4.7em;
|
|
right: 12.1em;
|
|
}
|
|
|
|
.circlesdwn{
|
|
position:absolute;
|
|
top:2.5em;
|
|
right:-13.5em;
|
|
-webkit-transform: rotate(180deg);
|
|
-moz-transform: rotate(180deg);
|
|
-ms-transform: rotate(180deg);
|
|
-o-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Create a container for our circles, rotate it 45 degrees and set animation*/
|
|
.circle {
|
|
position: absolute;
|
|
width: 15em;
|
|
height: 15em;
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
-o-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
-webkit-animation: orbit 2s infinite;
|
|
-moz-animation: orbit 2s infinite;
|
|
-moz-animation: orbit 2s infinite;
|
|
-ms-animation: orbit 2s infinite;
|
|
-o-animation: orbit 2s infinite;
|
|
animation: orbit 2s infinite;
|
|
z-index:5;
|
|
}
|
|
|
|
/* Style's of our circles */
|
|
.circle:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 2em;
|
|
height: 2em;
|
|
-webkit-border-radius: 100%;
|
|
-moz-border-radius: 100%;
|
|
-ms-border-radius: 100%;
|
|
-o-border-radius: 100%;
|
|
border-radius: 100%;
|
|
background: #13A3A5; /* Pick a color 1*/
|
|
}
|
|
|
|
.circle:nth-child(2) {
|
|
-webkit-animation-delay: 100ms;
|
|
-moz-animation-delay: 100ms;
|
|
-ms-animation-delay: 100ms;
|
|
-o-animation-delay: 100ms;
|
|
animation-delay: 100ms;
|
|
z-index:4;
|
|
}
|
|
|
|
.circle:nth-child(2):after {
|
|
background: #56bebf; /* Pick a color 2*/
|
|
-webkit-transform: scale(0.8,0.8);
|
|
-moz-transform: scale(0.8,0.8);
|
|
-ms-transform: scale(0.8,0.8);
|
|
-o-transform: scale(0.8,0.8);
|
|
transform: scale(0.8,0.8);
|
|
}
|
|
|
|
.circle:nth-child(3) {
|
|
-webkit-animation-delay: 225ms;
|
|
-moz-animation-delay: 225ms;
|
|
-ms-animation-delay: 225ms;
|
|
-o-animation-delay: 225ms;
|
|
animation-delay: 225ms;
|
|
z-index:3;
|
|
}
|
|
|
|
.circle:nth-child(3):after {
|
|
background: #ffa489; /* Pick a color 3*/
|
|
-webkit-transform: scale(0.6,0.6);
|
|
-moz-transform: scale(0.6,0.6);
|
|
-ms-transform: scale(0.6,0.6);
|
|
-o-transform: scale(0.6,0.6);
|
|
transform: scale(0.6,0.6);
|
|
}
|
|
|
|
.circle:nth-child(4) {
|
|
-webkit-animation-delay: 350ms;
|
|
-moz-animation-delay: 350ms;
|
|
-ms-animation-delay: 350ms;
|
|
-o-animation-delay: 350ms;
|
|
animation-delay: 350ms;
|
|
z-index:2;
|
|
}
|
|
|
|
.circle:nth-child(4):after {
|
|
background: #ff6d37; /* Pick a color 4*/
|
|
-webkit-transform: scale(0.4,0.4);
|
|
-moz-transform: scale(0.4,0.4);
|
|
-ms-transform: scale(0.4,0.4);
|
|
-o-transform: scale(0.4,0.4);
|
|
transform: scale(0.4,0.4);
|
|
}
|
|
|
|
|
|
.circle:nth-child(5) {
|
|
-webkit-animation-delay: 475ms;
|
|
-moz-animation-delay: 475ms;
|
|
-ms-animation-delay: 475ms;
|
|
-o-animation-delay: 475ms;
|
|
animation-delay: 475ms;
|
|
z-index:1;
|
|
}
|
|
|
|
.circle:nth-child(5):after {
|
|
background: #DB2F00; /* Pick a color 5*/
|
|
-webkit-transform: scale(0.2,0.2);
|
|
-moz-transform: scale(0.2,0.2);
|
|
-ms-transform: scale(0.2,0.2);
|
|
-o-transform: scale(0.2,0.2);
|
|
transform: scale(0.2,0.2);
|
|
}
|
|
|
|
/* Animation keys */
|
|
@-webkit-keyframes orbit {
|
|
0% { -webkit-transform:rotate(45deg); }
|
|
|
|
5% { -webkit-transform:rotate(45deg);
|
|
-webkit-animation-timing-function: ease-out; }
|
|
|
|
70% { -webkit-transform:rotate(405deg);
|
|
-webkit-animation-timing-function: ease-in; }
|
|
|
|
100% { -webkit-transform:rotate(405deg); }
|
|
}
|
|
|
|
@-moz-keyframes orbit {
|
|
0% { -moz-transform:rotate(45deg); }
|
|
|
|
5% { -moz-transform:rotate(45deg);
|
|
-moz-animation-timing-function: ease-out; }
|
|
|
|
70% { -moz-transform:rotate(405deg);
|
|
-moz-animation-timing-function: ease-in; }
|
|
|
|
100% { -moz-transform:rotate(405deg); }
|
|
}
|
|
@-ms-keyframes orbit {
|
|
0% { -ms-transform:rotate(45deg); }
|
|
|
|
5% { -ms-transform:rotate(45deg);
|
|
-ms-animation-timing-function: ease-out; }
|
|
|
|
70% { -ms-transform:rotate(405deg);
|
|
-ms-animation-timing-function: ease-in; }
|
|
|
|
100% { -ms-transform:rotate(405deg); }
|
|
}
|
|
|
|
@-o-keyframes orbit {
|
|
0% { -o-transform:rotate(45deg); }
|
|
|
|
5% { -o-transform:rotate(45deg);
|
|
-o-animation-timing-function: ease-out; }
|
|
|
|
70% { -o-transform:rotate(405deg);
|
|
-o-animation-timing-function: ease-in; }
|
|
|
|
100% { -o-transform:rotate(405deg); }
|
|
}
|
|
|
|
@keyframes orbit {
|
|
0% { transform:rotate(45deg); }
|
|
|
|
5% { transform:rotate(45deg);
|
|
animation-timing-function: ease-out; }
|
|
|
|
70% { transform:rotate(405deg);
|
|
animation-timing-function: ease-in; }
|
|
|
|
100% { transform:rotate(405deg); }
|
|
}
|
|
|
|
|
|
@-webkit-keyframes text {
|
|
0% {-webkit-transform:scale(0.2,0.2);
|
|
-webkit-animation-timing-function: ease-out; }
|
|
|
|
40%,60%{ -webkit-transform:scale(1,1);
|
|
-webkit-animation-timing-function: ease-out; }
|
|
|
|
70%,100%{ -webkit-transform:scale(0.2,0.2); }
|
|
}
|
|
|
|
@-moz-keyframes text {
|
|
0% {-moz-transform:scale(0.2,0.2);
|
|
-moz-animation-timing-function: ease-out; }
|
|
|
|
50% { -moz-transform:scale(1,1);
|
|
-moz-animation-timing-function: ease-out; }
|
|
|
|
60% { -moz-transform:scale(1,1);
|
|
-moz-animation-timing-function: ease-out; }
|
|
|
|
100% { -moz-transform:scale(0.2,0.2); }
|
|
}
|
|
|
|
@-mos-keyframes text {
|
|
0% {-mos-transform:scale(0.2,0.2);
|
|
-mos-animation-timing-function: ease-out; }
|
|
|
|
50% { -mos-transform:scale(1,1);
|
|
-mos-animation-timing-function: ease-out; }
|
|
|
|
60% { -mos-transform:scale(1,1);
|
|
-mos-animation-timing-function: ease-out; }
|
|
|
|
100% { -mos-transform:scale(0.2,0.2); }
|
|
}
|
|
|
|
@-o-keyframes text {
|
|
0% { -o-transform:scale(0.2,0.2);
|
|
-o-animation-timing-function: ease-out; }
|
|
|
|
50% { -o-transform:scale(1,1);
|
|
-o-animation-timing-function: ease-out; }
|
|
|
|
60% { -o-transform:scale(1,1);
|
|
-o-animation-timing-function: ease-out; }
|
|
|
|
100% { -o-transform:scale(0.2,0.2); }
|
|
}
|
|
|
|
@keyframes text {
|
|
0% { transform:scale(0.2,0.2);
|
|
animation-timing-function: ease-out; }
|
|
|
|
50% { transform:scale(1,1);
|
|
animation-timing-function: ease-out; }
|
|
|
|
60% { transform:scale(1,1);
|
|
animation-timing-function: ease-out; }
|
|
|
|
100% { transform:scale(0.2,0.2); }
|
|
}
|