O CSS3 é muito poderoso nos efeitos e possibilidades que nos oferece.
Com o CSS3 consegue-se criar efeitos bastante interessantes, é o caso desta bicicleta que com apenas CSS e CSS3 consegue-se todo o movimento.
O Código que faz tudo isto acontecer;
Para copiar o código clicar no ícone abaixo<div class="animeContainer">
<img class="bg_" src="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/ExemplosCSS/bike/images/bg.png" />
<div id="bike">
<div id="frame">
<img src="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/ExemplosCSS/bike/images/bike_frame.png" />
</div>
<div id="wheel_b">
<img src="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/ExemplosCSS/bike/images/wheel.png" />
</div>
<div id="wheel_f">
<img src="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/ExemplosCSS/bike/images/wheel.png" />
</div>
<div id="crank_all">
<div id="crank_b">
<img src="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/ExemplosCSS/bike/images/crank_b.png" />
</div>
<div id="pedal_b">
<img src="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/ExemplosCSS/bike/images/pedal_b.png" />
</div>
</div>
<br />
<div id="crank_f">
<img src="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/ExemplosCSS/bike/images/crank_f.png" />
<br />
<div id="pedal_f">
<img src="https://dl.dropboxusercontent.com/u/3883727/MyCodeBox/content/files/ExemplosCSS/bike/images/pedal_f.png" />
</div>
</div>
</div>
</div>
Para copiar o código clicar no ícone abaixo.animeContainer {
margin: 0;
position: relative;
width: 100%;
}
.animeContainer>img.bg_ {
max-width: 100%;
width: 100%;
height: auto;
}
#bike {
width: 40%;
height: 46%;
position: absolute;
left: 30%;
top: 30%;
}
#bike>img {
width: 100%;
max-width: 455px;
height: auto;
}
#frame {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
#frame img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
#frame>div {
position: relative!important;
max-width: 455px;
height: auto;
}
#wheel_b {
width: 39%;
height: auto;
position: absolute;
left: 2%;
top: 35.5%;
z-index: 5;
-webkit-animation: rotatingf 0.4s linear infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: rotatingf 0.4s linear infinite;
-moz-transform-origin: 50% 50%;
-ms-animation: rotatingf 0.4s linear infinite;
-ms-transform-origin: 50% 50%;
-o-animation: rotatingf 0.4s linear infinite;
-o-transform-origin: 50% 50%;
}
#wheel_b>img {
max-width: 174px;
width: 100%;
height: auto;
}
@-webkit-keyframes rotating {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
@-moz-keyframes rotating {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
@-ms-keyframes rotating {
from { -ms-transform: rotate(0deg) }
to { -ms-transform: rotate(360deg) }
}
@-o-keyframes rotating {
from { -o-transform: rotate(0deg) }
to { -o-transform: rotate(360deg) }
}
#wheel_f {
width: 39%;
height: auto;
position: absolute;
left: 60%;
top: 36%;
z-index: 5;
-webkit-animation: rotatingf 0.4s linear infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: rotatingf 0.4s linear infinite;
-moz-transform-origin: 50% 50%;
-ms-animation: rotatingf 0.4s linear infinite;
-ms-transform-origin: 50% 50%;
-o-animation: rotatingf 0.4s linear infinite;
-o-transform-origin: 50% 50%;
}
#wheel_f>img {
max-width: 174px;
width: 100%;
height: auto;
}
@-webkit-keyframes rotatingf {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
@-moz-keyframes rotatingf {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
@-ms-keyframes rotatingf {
from { -ms-transform: rotate(0deg) }
to { -ms-transform: rotate(360deg) }
}
@-o-keyframes rotatingf {
from { -o-transform: rotate(0deg) }
to { -o-transform: rotate(360deg) }
}
#crank_all {
width: 7.2%;
height: 18.4%;
position: absolute;
left: 39.1%;
top: 54%;
z-index: 3;
-webkit-animation: crank_b 1.5s linear infinite;
-webkit-transform-origin: 81% 86%;
-moz-animation: crank_b 1.5s linear infinite;
-moz-transform-origin: 81% 86%;
-ms-animation: crank_b 1.5s linear infinite;
-ms-transform-origin: 81% 86%;
-o-animation: crank_b 1.5s linear infinite;
-o-transform-origin: 81% 86%;
}
#crank_b {
width: 100%;
height: 18.4%;
position: absolute;
z-index: 3;
}
#crank_b>img {
max-width: 174px;
width: 100%;
height: auto;
}
@-webkit-keyframes crank_b {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
@-moz-keyframes crank_b {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
@-ms-keyframes crank_b {
from { -ms-transform: rotate(0deg) }
to { -ms-transform: rotate(360deg) }
}
@-o-keyframes crank_b {
from { -o-transform: rotate(0deg) }
to { -o-transform: rotate(360deg) }
}
#pedal_b {
width: 75%;
height: 17.8%;
position: absolute;
left: 10%;
top: -6%;
z-index: 1;
-webkit-animation: pedal_f 1.5s linear infinite;
-webkit-transform-origin: 40% 82%;
-moz-animation: pedal_f 1.5s linear infinite;
-moz-transform-origin: 40% 82%;
-ms-animation: pedal_f 1.5s linear infinite;
-ms-transform-origin: 40% 82%;
-o-animation: pedal_f 1.5s linear infinite;
-o-transform-origin: 40% 82%;
}
#pedal_b>img {
width: 100%;
max-width: 25px;
height: auto;
}
#crank_f {
width: 12%;
height: 25%;
position: absolute;
left: 39.3%;
top: 60.5%;
z-index: 200000000;
-webkit-animation: crank_f 1.5s linear infinite;
-webkit-transform-origin: 50% 35%;
-moz-animation: crank_f 1.5s linear infinite;
-moz-transform-origin: 50% 35%;
-ms-animation: crank_f 1.5s linear infinite;
-ms-transform-origin: 50% 35%;
-o-animation: crank_f 1.5s linear infinite;
-o-transform-origin: 50% 35%;
}
#crank_f>img {
width: 100%;
max-width: 54px;
height: auto;
}
@-webkit-keyframes crank_f {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
@-moz-keyframes crank_f {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
@-ms-keyframes crank_f {
from { -ms-transform: rotate(0deg) }
to { -ms-transform: rotate(360deg) }
}
@-o-keyframes crank_f {
from { -o-transform: rotate(0deg) }
to { -o-transform: rotate(360deg) }
}
#pedal_f {
width: 46.2%;
height: 14.2%;
position: absolute;
left: 51.8%;
top: 85.7%;
z-index: 1;
-webkit-animation: pedal_f 1.5s linear infinite;
-moz-animation: pedal_f 1.5s linear infinite;
-ms-animation: pedal_f 1.5s linear infinite;
-o-animation: pedal_f 1.5s linear infinite;
}
#pedal_f>img {
width: 100%;
max-width: 25px;
height: auto;
}
@-webkit-keyframes pedal_f {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(-360deg) }
}
@-moz-keyframes pedal_f {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(-360deg) }
}
@-ms-keyframes pedal_f {
from { -ms-transform: rotate(0deg) }
to { -ms-transform: rotate(-360deg) }
}
@-o-keyframes pedal_f {
from { -o-transform: rotate(0deg) }
to { -o-transform: rotate(-360deg) }
}
#fbike {
width: 20%;
height: auto;
background-repeat: no-repeat;
position: absolute;
right: 42%;
bottom: 40%;
z-index: 1;
}
#fbike>img {
width: 100%;
max-width: 275px;
height: auto;
}
0 comentários :
Enviar um comentário