Membuat Animasi Motor Dengan CSS

14:14:00 26 Comments
Membuat Animasi Motor Dengan CSS


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


Berjumpa lagi dengan saya selaku admin codingpintar.blogspot.com . .
masih semangat kan untuk belajar coding nya heheh  ^_^

pada kesempatan kali ini saya masih ingin membagikan suatu animasi yang di buat oleh css.
kalau pada tutorial sebelumnya animasi yang terakhir adalah Membuat Animasi Mini Bus Dengan CSS yang bisa anda lihat tutorial dan demonya DISINI 
Nah pada hari ini animasinya pun hampir sama yaitu berupa kendaraan, namun animasi yang saya buat pada hari ini adalah Animasi Motor Dengan CSS sekali lagi saya ingatkan animasi ini bukan buatan saya melainkan salah seorang programmer yang bernama Mahmoud Aslan anda bisa melihat profilnya melalui twtternya di @MhmoodLan seperti biasa karya dia sengaja saya share disini karena saya menyukainya dan supaya kita semua dapat menikmati karyanya,
tidak usah berlama-lama lagi langsung saja ikuti tutorial Cara Membuat Animasi Motor Dengan CSS pada kali ini dengan baik dan benar.

1. Membuat File HTML
seperti tutorial-tutorial sebelumnya untuk membuat animasi jangan lupa untuk membuat file htmlnya terlebih dahulu, 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>
<html>
<head>
 <title>Animasi Motor CSS</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>CSS Motorcycle</h1>
  <div class="container">
    <div class="bike-body">
      <div class="seat"></div>
      <div class="cover"></div>
      <div class="lamp"></div>
      <div class="motor">
        <div class="part-1">
          <div class="part-1-top"></div>
          <div class="part-1-bottom"></div>
        </div>
        <div class="part-2">
          <div class="part-2-base">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
          </div>
        </div>
      </div>
      <div class="front"></div>
      <div class="back"></div>
    </div>
    <div class="tire"></div>
    <div class="tire"></div>
    <div class="smoke"></div>
  </div>
</body>
</html>

Seperti biasa sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya hanya berupa teks dan belum ada animasi motornya
agar terbentuk animasi motornya Silahkan ikuti langkah selanjutnya

2. Membuat File CSS
file css memang sangat penting untuk membuat hal yang menarik di website, 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;
  box-sizing: border-box;
}

body {
  background: #D0EAFC;
}

h1 {
  font-family: "droid sans";
  position: absolute;
  left: 50%;
  top: 100px;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 220px;
  height: 125px;
  color: black;
  font-family: "droid Sans", sans-serif;
}

.bike-body {
  width: 250px;
  height: 108px;
  position: relative;
  left: -20px;
  top: 3px;
}
.bike-body .seat {
  width: 30px;
  height: 30px;
  background: -webkit-radial-gradient(circle at right top, rgba(248, 80, 50, 0) 0%, rgba(241, 111, 92, 0) 50%, rgba(246, 41, 12, 0) 51%, rgba(242, 45, 19, 0) 64%, #434b59 65%, #434b59 71%, #434b59 100%);
  background: radial-gradient(circle at right top, rgba(248, 80, 50, 0) 0%, rgba(241, 111, 92, 0) 50%, rgba(246, 41, 12, 0) 51%, rgba(242, 45, 19, 0) 64%, #434b59 65%, #434b59 71%, #434b59 100%);
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transform: rotateZ(-40deg);
          transform: rotateZ(-40deg);
  position: absolute;
  top: 64px;
  left: 65px;
}
.bike-body .seat:before {
  content: "";
  display: block;
  width: 9px;
  height: 35px;
  position: relative;
  top: -2px;
  left: -4px;
  background: #434B59;
  border-radius: 5px;
}
.bike-body .seat:after {
  content: "";
  display: block;
  width: 35px;
  height: 9px;
  position: relative;
  top: -10px;
  left: -4px;
  background: #434B59;
  border-radius: 5px;
}
.bike-body .cover {
  width: 75px;
  height: 30px;
  background: #F4492C;
  position: absolute;
  top: 55px;
  left: 105px;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 110px 20px 15px 5px/50px 20px 20px 5px;
  z-index: 11;
  box-shadow: inset -5px -2px 0px 2px rgba(0, 0, 0, 0.2);
}
.bike-body .lamp {
  width: 25px;
  height: 25px;
  background: -webkit-linear-gradient(0deg, #434b59 65%, #FFDD4D 35%);
  background: linear-gradient(90deg, #434b59 65%, #FFDD4D 35%);
  border-radius: 70px 60px 60px 50px/40px 60px 60px 15px;
  position: relative;
  top: 60px;
  right: -185px;
}
.bike-body .motor {
  width: 75px;
  height: 45px;
  position: absolute;
  left: 90px;
  top: 90px;
}
.bike-body .motor .part-1 {
  width: 35px;
  height: 45px;
  display: inline-block;
}
.bike-body .motor .part-1 .part-1-top {
  width: 40px;
  height: 20px;
  background: -webkit-linear-gradient(315deg, transparent 10px, #F5492C 0);
  background: linear-gradient(135deg, transparent 10px, #F5492C 0);
  border-radius: 0px 5px 5px 5px;
  box-shadow: inset -2px -2px 0px 1px rgba(0, 0, 0, 0.2);
}
.bike-body .motor .part-1 .part-1-bottom {
  width: 35px;
  height: 17px;
  background: #829399;
  position: relative;
  top: 5px;
  border-radius: 5px;
}
.bike-body .motor .part-1 .part-1-bottom:after {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #829399;
  border: 3px solid #A2B1B7;
  position: relative;
  left: 13px;
  top: -3px;
}
.bike-body .motor .part-2 {
  width: 30px;
  height: 45px;
  display: inline-block;
  -webkit-animation: shake 0.1s infinite;
          animation: shake 0.1s infinite;
}
.bike-body .motor .part-2 .part-2-base {
  width: 25px;
  height: 33px;
  background: #A4B4BA;
  margin: auto;
  position: relative;
  top: 5px;
  left: 5px;
  border-radius: 15px;
}
.bike-body .motor .part-2 .part-2-base .line {
  position: relative;
  margin: auto;
  width: 105%;
  left: -2.5%;
  top: -2px;
  height: 4px;
  background: #829399;
  margin-bottom: 6px;
  border-radius: 3px;
}
.bike-body .motor .part-2 .part-2-base .line:nth-child(1) {
  height: 6px;
  background: #434B59;
  top: 0;
}
.bike-body .motor .part-2 .part-2-base .line:nth-child(1):before {
  content: "";
  display: block;
  width: 20px;
  height: 4px;
  background: #434B59;
  margin: auto;
  position: relative;
  top: -3px;
  border-radius: 5px;
}
.bike-body .motor .part-2 .part-2-base .line:nth-child(4) {
  width: 60%;
}
.bike-body .front {
  position: absolute;
  width: 10px;
  height: 100px;
  background: #AABABF;
  -webkit-transform: rotateZ(-30deg);
          transform: rotateZ(-30deg);
  right: 53px;
  top: 40px;
  border-radius: 7px;
  z-index: 10;
}
.bike-body .front:before {
  content: "";
  display: block;
  width: 25px;
  height: 6px;
  background: #434b59;
  border-radius: 5px;
  -webkit-transform: rotateZ(30deg);
          transform: rotateZ(30deg);
  position: relative;
  left: -18px;
  top: -7px;
}
.bike-body .front:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #434b59;
  position: absolute;
  top: -5px;
}
.bike-body .back {
  position: absolute;
  width: 120px;
  box-sizing: content-box;
  background: transparent;
  border: 10px solid #AABABF;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  bottom: -40px;
  left: 30px;
  z-index: 10;
}
.bike-body .back:before {
  content: "";
  display: block;
  width: 75px;
  height: 13px;
  background: #AABABF;
  position: absolute;
  left: 123px;
  top: 2px;
  -webkit-transform-origin: 0px;
      -ms-transform-origin: 0px;
          transform-origin: 0px;
  -webkit-transform: rotateZ(-70deg);
          transform: rotateZ(-70deg);
  border-radius: 0px 0px 10px 0px;
}
.bike-body .back:after {
  content: "";
  display: block;
  position: absolute;
  width: 80px;
  height: 9px;
  background: transparent;
  border: 10px solid #AABABF;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 0px 10px 0px 0px;
  -webkit-transform: skewX(20deg);
      -ms-transform: skewX(20deg);
          transform: skewX(20deg);
  top: -18px;
  left: -50px;
}

.tire {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ccc;
  border: 15px solid white;
  box-shadow: 0px 0px 0px 10px #454D5B;
}
.tire:before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  border: 10px solid transparent;
  border-top-color: #F5492C;
  border-radius: 50%;
  background: transparent;
  position: relative;
  top: -30px;
  left: -25px;
}
.tire:after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  background: transparent;
  position: relative;
  top: -93px;
  left: -19px;
  z-index: 9;
}

.tire:nth-child(2) {
  right: 0;
}
.tire:nth-child(2):before, .tire:nth-child(2):after {
  -webkit-transform: rotateZ(-20deg);
          transform: rotateZ(-20deg);
}

.smoke {
  width: 15px;
  height: 15px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 120px;
  left: -50px;
  -webkit-animation: fly 3s infinite;
          animation: fly 3s infinite;
}
.smoke:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: black;
  position: relative;
  right: -12px;
  top: 5px;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  25% {
    -webkit-transform: rotateZ(-5deg);
            transform: rotateZ(-5deg);
  }
  50% {
    -webkit-transform: rotateZ(5deg);
            transform: rotateZ(5deg);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  25% {
    -webkit-transform: rotateZ(-5deg);
            transform: rotateZ(-5deg);
  }
  50% {
    -webkit-transform: rotateZ(5deg);
            transform: rotateZ(5deg);
  }
}
@-webkit-keyframes fly {
  0% {
    opacity: 1;
  }
  35%, 100% {
    opacity: 0;
    top: 100px;
    left: -70px;
  }
}
@keyframes fly {
  0% {
    opacity: 1;
  }
  35%, 100% {
    opacity: 0;
    top: 100px;
    left: -70px;
  }
}

jika sudah selesai silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
dan lihat lah hasilnya  :D

Demikianlah Cara Membuat Animasi Motor 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


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



SHARE THIS
Unknown

Author:

Previous Post
Next Post
admin
8 October 2015 at 14:22

keren bangat animasinya. udah saya praktekin berhasil. makasih udah share :)

Reply
avatar
Anonymous
8 October 2015 at 14:29

Anjirr keren gan, boleh lah dicoba nih mantap !

Reply
avatar
Unknown
8 October 2015 at 15:21

izin coba gan , keren gan

Reply
avatar
Muchlist
8 October 2015 at 15:22

tutorialnya mantap nih , apalagi buat saya yang baru belajar bikin animasi dengan css. ditunggu next tutorialnya

Reply
avatar
Reza Syahputra Rizal
8 October 2015 at 15:52

Walah Ternyata Membuat Animasi Motor Bisa dengan CSS, Patut Bua Dicoba Nih :D

Reply
avatar
Unknown
8 October 2015 at 15:57

Wah Keren banget Lohhh.
salam Mas Semut

Reply
avatar
Allegiance Zamzam
8 October 2015 at 16:04

Waw, keren banget gan animasinya....ijin mencoba gan...di tunggu kunjungannya ke blog saya...salam kenal gan

Reply
avatar
Nisful Ardi
8 October 2015 at 16:45

Wiihhh... Keren gan....
Ardibryan4.blogspot.com

Reply
avatar
Unknown
8 October 2015 at 18:58

keren gan, bisa nih untuk referensi

Reply
avatar
Pembuat Patung
9 October 2015 at 03:35

Wah ilmu baru lagi .Makasih ditunggu ilmu-ilmu yang laen

Reply
avatar
Muhammad taufiq nur
9 October 2015 at 03:57

udah liat demonya, keren banget gan..
di tunggu update animasinya :D

Reply
avatar
Admin86
9 October 2015 at 07:24

coba praktek dulu akh..
http://www.indoblazer.com/2015/10/bedanya-ladyjek-dengan-gojek-atau-blujek.html

Reply
avatar
Anonymous
9 October 2015 at 10:06

wah keren gan... ijin bookmark ya...

Reply
avatar
Rangga Saputra
9 October 2015 at 17:00

Smpe skrg ane kalo ain CSS masih belum ngerti *curhat :V

Reply
avatar
Anonymous
11 October 2015 at 21:03

Unik banget dan keren gan

Reply
avatar
Unknown
13 October 2015 at 04:12

Mantap gan tak coba dulu animasinya

Reply
avatar
Naufal Hafiz
13 October 2015 at 19:00

keren banget gan, kira2 bisa request gak ya?

Reply
avatar
Kin
17 October 2015 at 12:04

wa! bikin motor dengan css nih, keren gan!! keren abiss

Reply
avatar
trio aryanto
20 October 2015 at 13:11

setelah saya coba ternyata animasinya bagus makasih gan,,bw balik y gan

Reply
avatar
Unknown
13 August 2017 at 11:52

mantap gan , gan itu mentahan gambarnya udh agan save atau memang diprogram ulang dari awal

Reply
avatar
Subscribe to: Post Comments (Atom)