loading...



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