Non puoi selezionare più di 25 argomenti
Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
119 righe
3.2 KiB
119 righe
3.2 KiB
2 anni fa
|
/**
|
||
|
|
* Create the loop delay with
|
||
|
|
* the extra keyframes
|
||
|
|
*/
|
||
|
|
@-webkit-keyframes moveup {
|
||
|
|
0%, 60%, 100% {
|
||
|
|
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
|
||
|
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
|
||
|
|
}
|
||
|
|
25% {
|
||
|
|
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
|
||
|
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes moveup {
|
||
|
|
0%, 60%, 100% {
|
||
|
|
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
|
||
|
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
|
||
|
|
}
|
||
|
|
25% {
|
||
|
|
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
|
||
|
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes movedown {
|
||
|
|
0%, 60%, 100% {
|
||
|
|
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
|
||
|
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
|
||
|
|
}
|
||
|
|
25% {
|
||
|
|
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
|
||
|
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes movedown {
|
||
|
|
0%, 60%, 100% {
|
||
|
|
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
|
||
|
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
|
||
|
|
}
|
||
|
|
25% {
|
||
|
|
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
|
||
|
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Square layer styles
|
||
|
|
*/
|
||
|
|
.layer {
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
height: 3em;
|
||
|
|
width: 3em;
|
||
|
|
box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
|
||
|
|
-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
|
||
|
|
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.layer:nth-of-type(1) {
|
||
|
|
background: #ff9300;
|
||
|
|
margin-top: 1.5em;
|
||
|
|
-webkit-animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
|
||
|
|
animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layer:nth-of-type(1):before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 85%;
|
||
|
|
height: 85%;
|
||
|
|
background: #ff9300;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layer:nth-of-type(2) {
|
||
|
|
background: rgba(127, 197, 240, 0.8);
|
||
|
|
margin-top: 0.75em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layer:nth-of-type(3) {
|
||
|
|
background: rgba(29, 86, 195, 0.73);
|
||
|
|
-webkit-animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
|
||
|
|
animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Stage and link styles */
|
||
|
|
body {
|
||
|
|
background: #f2f2f2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
position: absolute;
|
||
|
|
top: 35%;
|
||
|
|
left: 72%;
|
||
|
|
-webkit-transform: translate(-50%, -50%);
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container2 {
|
||
|
|
position: absolute;
|
||
|
|
top: 35%;
|
||
|
|
left: 50%;
|
||
|
|
-webkit-transform: translate(-50%, -50%);
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.link {
|
||
|
|
position: absolute;
|
||
|
|
top: 30%;
|
||
|
|
left: 50%;
|
||
|
|
color: rgba(255, 255, 255, 0.5);
|
||
|
|
font: 400 1em Helvetica Neue, Helvetica, sans-serif;
|
||
|
|
-webkit-transform: translate(-50%, -50%);
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.link a {
|
||
|
|
color: #ea4c89;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|