CSS
语言:
CSSSCSS
确定
/** Geral **/
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}
*:focus {
outline: none;
}
.clear {
clear: both;
}
a,
a:hover,
a:visited,
a:focus {
text-decoration: none;
border: 0 none;
color: inherit;
cursor: pointer;
}
img {
border: 0 none;
}
::-moz-selection {
background: #00aeef;
color: #fff;
}
::selection {
background: #00aeef;
color: #fff;
}
html {
background: #49dfff;
}
/** BIKE **/
.bike {
width: 278px;
height: 208px;
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bike .roda {
width: 123px;
height: 123px;
display: block;
background: #f47c7c;
border-radius: 50%;
position: absolute;
bottom: 0px;
}
.bike .roda:nth-child(even) {
left: 0px;
}
.bike .roda:nth-child(odd) {
right: 0px;
}
.bike .roda .aro {
width: 78px;
height: 78px;
display: block;
background: #a2df92;
border-radius: 50%;
position: absolute;
top: 22px;
left: 22px;
-webkit-animation: girando 800ms infinite linear;
animation: girando 800ms infinite linear;
}
.bike .roda:nth-child(even) .aro {
box-shadow: inset 4px 0px 2px 2px rgba(255, 255, 255, 0.8);
}
.bike .roda:nth-child(odd) .aro {
box-shadow: inset 0px 4px 2px 2px rgba(255, 255, 255, 0.8);
}
.bike .partes {
-webkit-animation: sobedesce 1800ms infinite linear;
animation: sobedesce 1800ms infinite linear;
}
.bike .quadro {
width: 169px;
height: 113px;
position: absolute;
top: 13px;
left: 52px;
}
.bike .quadro .parte {
height: 12px;
display: block;
background: #71a2d7;
border-radius: 12px;
position: absolute;
}
.bike .quadro .parte.q1 {
width: 90px;
top: 23px;
left: 42px;
}
.bike .quadro .parte.q2 {
width: 118px;
top: 74px;
left: -32px;
-webkit-transform: rotate(-67.5deg);
transform: rotate(-67.5deg);
}
.bike .quadro .parte.q3 {
width: 70px;
top: 124px;
left: 0px;
}
.bike .quadro .parte.q4 {
width: 110px;
top: 89px;
left: 45px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.bike .quadro .parte.q5 {
width: 120px;
top: 75px;
left: 85px;
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
}
.bike .quadro .parte.q6 {
width: 30px;
top: 14px;
left: 30px;
-webkit-transform: rotate(-108deg);
transform: rotate(-108deg);
}
.bike .quadro .parte.q7 {
width: 30px;
top: 10px;
left: 111px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.bike .quadro .parte.q7 {
width: 30px;
top: 10px;
left: 110px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.bike .guidom {
width: 68px;
height: 48px;
position: absolute;
top: 12px;
right: 39px;
}
.bike .guidom .parte {
height: 12px;
display: block;
background: #71a2d7;
border-radius: 12px;
position: absolute;
}
.bike .guidom .parte.g1 {
width: 52px;
top: 0px;
left: 0px;
}
.bike .guidom .parte.g2 {
width: 24px;
top: 8px;
right: 7px;
-webkit-transform: rotate(70deg);
transform: rotate(70deg);
}
.bike .guidom .parte.g3 {
width: 30px;
top: 21px;
right: 8px;
-webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
.bike .banco {
width: 56px;
height: 18px;
display: block;
background: #f7f78a;
border-radius: 18px;
position: absolute;
top: 7px;
left: 68px;
}
.bike .coroa {
width: 34px;
height: 34px;
display: block;
background: transparent;
border-radius: 50%;
border: 11px solid #f7f78a;
position: absolute;
top: 126px;
left: 99px;
}
.rua {
width: 100%;
height: 40%;
display: block;
background: #6d6d6d;
position: absolute;
bottom: 0px;
left: 0px;
z-index: -1;
overflow: hidden;
}
.rua .linha {
width: 60%;
height: 5px;
background: #FFC107;
margin: 20vh 9%;
position: absolute;
left: 0px;
-webkit-animation: correndo 1800ms infinite linear;
animation: correndo 1800ms infinite linear;
}
@-webkit-keyframes girando {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes girando {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes sobedesce {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(0px, -5px);
transform: translate(0px, -5px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes sobedesce {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(0px, -5px);
transform: translate(0px, -5px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@-webkit-keyframes correndo {
0% {
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
}
50% {
-webkit-transform: translate(-200%, 0);
transform: translate(-200%, 0);
}
51% {
-webkit-transform: translate(200%, 0);
transform: translate(200%, 0);
}
50% {
-webkit-transform: translate(-200%, 0);
transform: translate(-200%, 0);
}
}
@keyframes correndo {
0% {
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
}
50% {
-webkit-transform: translate(-200%, 0);
transform: translate(-200%, 0);
}
50.01% {
-webkit-transform: translate(200%, 0);
transform: translate(200%, 0);
}
50% {
-webkit-transform: translate(-200%, 0);
transform: translate(-200%, 0);
}
}
a.author {
font-size: 14px;
text-decoration: none;
color: #FFC107;
position: fixed;
bottom: 10px;
right: 10px;
}