السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
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
Mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf :D
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D
0 komentar:
Posting Komentar