Simple Coding Pemograman

Simple dan mudah belajar coding pemograman

Home » CSS » Cara Membuat Animasi Sepeda Dengan CSS

Cara Membuat Animasi Sepeda Dengan CSS

Cara Membuat Animasi Sepeda Dengan CSS - Sahabat Coding membuat coding simple sangat membantu dalam duania pemograman ,dan kali ini kita akan membahas mengenai rahasia simple Cara Membuat Animasi Sepeda Dengan CSS, buktikan saja sesuai tutorial Cara Membuat Animasi Sepeda Dengan CSS, dan pastikan temukan pengalaman tersendiri dalam dunia pemograman

Cara Membuat Animasi Sepeda Dengan CSS


السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ 

Selamat pagi semuanya ? :D

semoga sehat semua yah, dan masih semangat untuk belajar coding nya heheh  ^_^

pada Tutorial sebelumnya saya sudah Membuat Animasi Dengan CSS yaitu Animasi Kompas
yang bisa anda lihat tutorial dan demonya DISINI

Nah pada  kesempatan kali ini saya akan memberikan tutorial mengenai pembuatan animasi lagi yaitu Cara Membuat Animasi Sepeda Dengan CSS
pada kali ini animasi yang saya buat adalah animasi Sepeda yang sedang berjalan
Animasi ini hanya menggunakan css, mohon maaf di karenakan saya belum mampu membuat animasi dengan css Jadi animasi ini bukan buatan saya, melainkan programmer  yang bernama Alex Bergin
karya dia sengaja saya share karena saya menyukai karyanya dan agar kita semua dapat melihat karyanya. dari pada penasaran,
Langsung saja kita praktekan, silahkan ikuti langkah-langkah di bawah ini dengan benar.


1. Membuat File HTML
saya ingatkan file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini :

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="description">is for Bicycle</div>

<div id="animation">
    <div class="bike">
        
        <div class="bell">
            <div class="ringer">
                <div class="lever"></div>
            </div>
            <div class="audio">
                <div></div>
                <div></div>
                <div></div>
            </div>            
            <div class="stand"></div>
        </div>
        
        <div class="front wheel">
            <div class="rim">
                <div class="air"></div>
            </div>
            <div class="hub"></div>
            <div class="spokes">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        
        <div class="frame">
            <div></div>
            <div></div>
            <div></div>
            <div class="small"></div>
            <div></div>
            <div></div>
            <div class="small"></div>
            <div class="small"></div>
        </div>
        
        <div class="seat">
            <div class="support"></div>
            <div class="saddle"></div>
        </div>
        
        <div class="handlebars">
            <div class="frameConnector"></div>
            <div class="handle"></div>
        </div>
        
        <div class="pedals">
            <div class="gear">
                <div class="hub"></div>
                <div class="struts">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="front pedal">
                <div class="footpad"></div>
            </div>
            <div class="back pedal">
                <div class="footpad"></div>
            </div>
        </div>
        
        <div class="back wheel">
            <div class="rim">
                <div class="air"></div>
            </div>
            <div class="hub"></div>
            <div class="gear"></div>
            <div class="spokes">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
Sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya hanya berupa teks yang gk jelas,
agar terbentuk animasi sepedanya Silahkan ikuti langkah selanjutnya

2. Membuat File CSS
Nah ini dia file inti pada tutorial kali ini, kenapa di sebut file inti, ya karena tanpa file css kita tidak akan bisa membuat animasi tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :

* {
    padding: 0;
    margin: 0;
}

html , body {
    width: 100%;
    height: 100%:
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0%;
}

html {
    background-color: rgba(255,250,250,1);    
}

#description {
    position: fixed;
    bottom: 10px;
    width: 100%;
    z-index: 100;
    font-family: Helvetica;
    font-weight: 200;
    color: rgba(18,22,26,0.7);
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
}

.bell {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -99px;
    margin-left: -117px;
    z-index: 100;
}

.bell .stand {
    position: absolute;
    background-color: rgba(18,22,26,0.4);
    width: 6px;
    height: 3px;
}

.bell .lever {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: rgba(18,22,26,0.2);
    margin-top: 3px;
    margin-left: 14px;
    z-index: -1;
}

.bell .ringer {
    position: absolute;
    width: 14px;
    height: 6px;
    margin-left: -4px;
    margin-top:-6px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: rgba(246,188,49,0.6);
    animation: audioMove 5s linear 0s infinite alternate none;
 -webkit-animation: audioMove 5s linear 0s infinite alternate none;
}

.bell .audio {
    margin-top: -8px;
    margin-left: 4px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
}

.bell .audio div {
    width: 15px;
    border-top: 1px dashed rgba(246,188,49,0.6);
    animation: audioLines 5s linear 0s infinite alternate none;
 -webkit-animation: audioLines 5s linear 0s infinite alternate none;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    position: absolute;
}

.bell .audio div:nth-of-type(1){
    margin-top: -9px;
    -webkit-transform: rotate(-40deg);
    -moz-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    transform: rotate(-40deg);
}

.bell .audio div:nth-of-type(2){
    margin-left: 1px;
}

.bell .audio div:nth-of-type(3){
    margin-top: 9px;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transform: rotate(40deg);
}

.seat .support {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 39px;
    margin-top: -95px;
    width: 8px;
    height: 40px;
    background-color: rgba(235,238,241,1);
    -webkit-transform: rotate(14deg);
    -moz-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    -o-transform: rotate(14deg);
    transform: rotate(14deg);
}

.seat .saddle {
    width: 40px;
    height: 15px;
    border-right: 32px solid rgba(75,78,81,1);
    border-top: 8px solid rgba(75,78,81,1);
    border-top-right-radius: 32px;
    border-bottom-right-radius: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 5px;
    margin-top: -100px;
}

.seat .saddle:before {
    content:".";
    position: absolute;
    color: rgba(0,0,0,0);
    width: 40px;
    height: 15px;
    border-top-right-radius: 30px;
    border-top: 8px solid rgba(75,78,81,1);
    border-right: 8px solid rgba(75,78,81,1);
    margin-top: -8px;
}

.handlebars {
    z-index: 10;
}

.handlebars .frameConnector {
    position: absolute;
    border-right: 8px solid rgba(235,238,241,1);
    border-top: 8px solid rgba(235,238,241,1);
    border-top-right-radius: 50px;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -117px;
    margin-top: -98px;
}

.handlebars .handle {
    position: absolute;
    border-right: 8px solid rgba(75,78,81,1);
    border-bottom: 8px solid rgba(75,78,81,1);
    border-bottom-right-radius: 50px;
    left: 50%;
    width: 40px;
    height: 30px;
    margin-left: -158px;
    margin-top: -97px;
}

.frame div {
    position: absolute;
    background-color: rgba(255,74,83,1);
    border-radius: 8px;
    top: 50%;
    left: 50%;
    width: 8px;
    margin-left: -4px;
    z-index: 100;
}

.frame div.small {
    width: 4px;
    margin-left: -2px;
}

.frame div:nth-of-type(1){
    height: 128px;
    margin-top: -67px;
    margin-left: 20px;
    -webkit-transform: rotate(14deg);
    -moz-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    -o-transform: rotate(14deg);
    transform: rotate(14deg);
}

.frame div:nth-of-type(2){
    height: 118px;
    margin-top: -4px;
    margin-left: 62px;
    -webkit-transform: rotate(86deg);
    -moz-transform: rotate(86deg);
    -ms-transform: rotate(86deg);
    -o-transform: rotate(86deg);
    transform: rotate(86deg);
}

.frame div:nth-of-type(3){
    height: 155px;
    margin-top: -71px;
    margin-left: -50px;
    -webkit-transform: rotate(-46deg);
    -moz-transform: rotate(-46deg);
    -ms-transform: rotate(-46deg);
    -o-transform: rotate(-46deg);
    transform: rotate(-46deg);
}

.frame div:nth-of-type(4){
    height: 141px;
    margin-top: -78px;
    margin-left: 77px;
    -webkit-transform: rotate(-36deg);
    -moz-transform: rotate(-36deg);
    -ms-transform: rotate(-36deg);
    -o-transform: rotate(-36deg);
    transform: rotate(-36deg);
}

.frame div:nth-of-type(5){
    height: 141px;
    margin-top: -133px;
    margin-left: -32px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.frame div:nth-of-type(6){
    height: 45px;
    margin-top: -76px;
    margin-left: -104px;
    -webkit-transform: rotate(19deg);
    -moz-transform: rotate(19deg);
    -ms-transform: rotate(19deg);
    -o-transform: rotate(19deg);
    transform: rotate(19deg);
}

.frame div:nth-of-type(7){
    height: 97px;
    margin-top: -43px;
    margin-left: -120px;
    -webkit-transform: rotate(14deg);
    -moz-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    -o-transform: rotate(14deg);
    transform: rotate(14deg);
}

.frame div:nth-of-type(8){
    height: 97px;
    margin-top: -43px;
    margin-left: -118px;
    -webkit-transform: rotate(16deg);
    -moz-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    -o-transform: rotate(16deg);
    transform: rotate(16deg);
}

.pedals {
    position: absolute;
    z-index: 101;
    top: 50%;
    left: 50%;
    margin-top: 60px;
    margin-left: 8px;
    animation: wheelSpin 2.2s linear 0s infinite reverse none;
 -webkit-animation: wheelSpin 2.2s linear 0s infinite reverse none;
}

.pedals .gear {
    border: 6px solid rgba(75,78,81,1);
    border-radius: 150px;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    width: 38px;
    height: 38px;
    z-index: 1;
    overflow: hidden;
}

.pedals .gear .hub {
    background-color: rgba(95,98,101,1);
    width: 16px;
    height: 16px;
    border-radius: 20px;
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    z-index:2;
}

.pedals .gear .struts {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}

.pedals .gear .struts div {
    width: 6px;
    height: 20px;
    position: absolute;
    background-color: rgba(75,78,81,1);
    top: 50%;
    left: calc( 50% - 3px );
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.pedals .gear .struts div:nth-of-type(1){
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.pedals .gear .struts div:nth-of-type(2){
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    -o-transform: rotate(72deg);
    transform: rotate(72deg);
}

.pedals .gear .struts div:nth-of-type(3){
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    transform: rotate(144deg);
}

.pedals .gear .struts div:nth-of-type(4){
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    -o-transform: rotate(216deg);
    transform: rotate(216deg);
}

.pedals .gear .struts div:nth-of-type(5){
    -webkit-transform: rotate(288deg);
    -moz-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    -o-transform: rotate(288deg);
    transform: rotate(288deg);
}

.pedals .pedal {
    background-color: rgba(255,74,83,1);
    border-radius: 10px;
    position: absolute;
    top: calc(50% - 3px);
    left: calc(50% - 3px);
    width: 5px;
    height: 35px;
    z-index: 5;
}

.pedals .pedal .footpad {
    width: 16px;
    height: 5px;
    border-radius: 4px;
    position: absolute;
    z-index: 200;
    margin-left: -6px;
    margin-top: 31px;
    background-color: rgba(255,74,83,1);
    animation: wheelSpin 2.2s linear 0s infinite normal none;
 -webkit-animation: wheelSpin 2.2s linear 0s infinite normal none;
}

.pedals .pedal.back {
    z-index: -1;
    margin-top: -35px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.front.wheel {
    margin-left: -130px;
}

.back.wheel {
    margin-left: 120px;
}

.wheel {
    width: 144px;
    height: 144px;
    margin-top: 50px;
    border-radius: 150px;
    position: absolute;
    top: calc(50% - 75px);
    left: calc(50% - 75px);
    border: 4px solid rgba(18,22,26,0.7);
    overflow: hidden;
    border-radius: 150px;
    animation: wheelSpin 1.6s linear 0s infinite reverse none;
 -webkit-animation: wheelSpin 1.6s linear 0s infinite reverse none;
}

.wheel .hub {
    background-color: rgba(115,118,121,1);
    border: 2px dotted rgba(235,238,241,0.5);
    width: 10px;
    height: 10px;
    border-radius: 150px;
    position: absolute;
    top: calc(50% - 7px);
    left: calc(50% - 7px);
    z-index: 12;
}

.wheel .gear {
    background-color: rgba(75,78,81,1);
    border: 3px dotted rgba(255,250,250,1);
    border-radius: 150px;
    position: absolute;
    top: calc(50% - 13px);
    left: calc(50% - 13px);
    width: 20px;
    height: 20px;
    z-index: -1;
}

.wheel .rim {
    position: absolute;
    width: calc( 100% - 16px );
    height: calc( 100% - 16px );
    border: 8px solid rgba(235,238,241,1);
    border-radius: 150px;
    z-index: 12;
}

.wheel .rim .air {
    position: absolute;
    background-color: rgba(18,22,26,1);
    left: 50%;
    width: 2px;
    height: 6px;
    border-radius: 5px;
    z-index: 14;
    margin-left: -8px;
}

.back.wheel .rim .air {
    bottom: 0;
}

.wheel .spokes div {
    position: absolute;
    width: 0px;
    height: 144px;
    border-left: 2px solid rgba(18,22,26,0.5);
    margin-left: calc( 50% - 1px );
}

.wheel .spokes div:nth-of-type(1){
    -webkit-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
}

.wheel .spokes div:nth-of-type(2){
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wheel .spokes div:nth-of-type(3){
    -webkit-transform: rotate(67.5deg);
    transform: rotate(67.5deg);
}

.wheel .spokes div:nth-of-type(4){
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.wheel .spokes div:nth-of-type(5){
    -webkit-transform: rotate(112.5deg);
    transform: rotate(112.5deg);
}

.wheel .spokes div:nth-of-type(6){
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.wheel .spokes div:nth-of-type(7){
    -webkit-transform: rotate(157.5deg);
    transform: rotate(157.5deg);
}

.wheel .spokes div:nth-of-type(8){
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

@keyframes wheelSpin {
 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);} 
 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} 
}

@-webkit-keyframes wheelSpin {
 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);} 
 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} 
}

@keyframes audioLines {
 100% { width: 0px;}
    81% { width: 0px;} 
 78% { width: 15px;} 
 75% { width: 0;} 
 72% { width: 15px;} 
 69% { width: 0px;} 
 0% { width: 0px;} 
}

@-webkit-keyframes audioLines {
 100% { width: 0px;} 
    81% { width: 0px;} 
 78% { width: 15px;} 
 75% { width: 0;} 
 72% { width: 15px;} 
 69% { width: 0px;} 
 0% { width: 0px;} 
}

@keyframes audioMove {
 100% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 81% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 78% { -webkit-transform: translate(2px , 0px); -moz-transform: translate(2px , 0px); -ms-transform: translate(2px , 0px); -o-transform: translate(2px , 0px); transform: translate(2px , 0px);} 
 75% { -webkit-transform: translate(-2px , 0px) rotate( -10deg ); -moz-transform: translate(-2px , 0px) rotate( -10deg ); -ms-transform: translate(-2px , 0px) rotate( -10deg ); -o-transform: translate(-2px , 0px) rotate( -10deg ); transform: translate(-2px , 0px) rotate( -10deg );} 
 72% { -webkit-transform: translate(2px , 0px) rotate( 10deg ); -moz-transform: translate(2px , 0px) rotate( 10deg ); -ms-transform: translate(2px , 0px) rotate( 10deg ); -o-transform: translate(2px , 0px) rotate( 10deg ); transform: translate(2px , 0px) rotate( 10deg );} 
 69% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 0% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
}

@-webkit-keyframes audioMove {
 100% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 81% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 78% { -webkit-transform: translate(2px , 0px); -moz-transform: translate(2px , 0px); -ms-transform: translate(2px , 0px); -o-transform: translate(2px , 0px); transform: translate(2px , 0px);} 
 75% { -webkit-transform: translate(-2px , 0px) rotate( -10deg ); -moz-transform: translate(-2px , 0px) rotate( -10deg ); -ms-transform: translate(-2px , 0px) rotate( -10deg ); -o-transform: translate(-2px , 0px) rotate( -10deg ); transform: translate(-2px , 0px) rotate( -10deg );} 
 72% { -webkit-transform: translate(2px , 0px) rotate( 10deg ); -moz-transform: translate(2px , 0px) rotate( 10deg ); -ms-transform: translate(2px , 0px) rotate( 10deg ); -o-transform: translate(2px , 0px) rotate( 10deg ); transform: translate(2px , 0px) rotate( 10deg );} 
 69% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
 0% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 
}


silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
lihat apa yang terjadi di browsermu :D

Demikianlah Cara Membuat Animasi Sepeda Dengan CSS, keren bukan ? :D
Jika anda ingin melihat hasilnya atau demonya Silahkan anda buka halaman demonya di bawah ini

Demo
click to view

Mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf :D
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D


وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ



Dan sekian tutorial Cara Membuat Animasi Sepeda Dengan CSS kali ini

Salam sahabat coding Cara Membuat Animasi Sepeda Dengan CSS, semoga dapat membantu untuk mencari solusi permasalahan seputar coding anda,teruslah ikuti simple coding diportal ini.
Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara Membuat Animasi Sepeda Dengan CSS

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)