» » Animasi Minion Dengan CSS3
Edit

Animasi Minion Dengan CSS3

animasi dengan css3


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

apa kabar semua  ? ^_^
semoga sehat semua yah, dan masih semangat untuk belajar codingnya heheh  ^_^

pada kesempatan kali ini saya akan memberikan tutorial  Cara Membuat Animasi Dengan CSS3
pada kali ini animasi yang saya buat adalah animasi minion, 
animasi ini hanya menggunakan css3, sebenarnya animasi ini bukan buatan saya melainkan programmer front end developer dari rumania yang bernama  Codrin Pavel.
karya dia sengaja saya share disini agar kita semua bisa tau cara membuat animasi dengan css3
Langsung saja kita praktekan, silahkan ikuti langkah-langkah di bawah ini dengan benar.


1. Membuat File HTML
seperti biasa siapkan file HTML bernama index.html, lalu ketikkan script berikut ini .

 <!DOCTYPE html>
<html>
<head>
  <title>Animasi Minion CSS3</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="banana"></div>
<div class="minion">
  <div class="hair">
    <div class="hair1"></div>
    <div class="hair2"></div>
  </div>
  <div class="body">
    <div class="monocle">
      <div class="eye"></div>
    </div>
  </div>
</div>
</body>
</html>

2. Membuat File CSS
Nah ini dia yang terpenting hehehe, jika sudah buat file htmlnya, silahkan buat file cssnya bernama style.css, dan ketikkan script berikut .

body, html{width:100%;height:100%;margin:0;}
body{background-color:#86CDEE;overflow:hidden}
.minion{width:488px;height:488px;box-shadow:1px 1px 3px 0px rgba(0,0,0, .5);border-radius:111px;
position:absolute;top:50%;left:50%;margin-top:-225px;margin-left:-244px;}
.minion::before{content: '';position:absolute;width:488px;height:595px;left:172px;top:117px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
background:linear-gradient(to right, rgba(0,0,0, .15), rgba(0,0,0, .0));
background:-webkit-linear-gradient(left, rgba(0,0,0, .15), rgba(0,0,0, .0));}

.hair,.hair1,.hair2,.hair:before,.hair1:before,.hair2:before,.hair:after,.hair1:after,.hair2:after{position:absolute;bottom:0;}
.hair:before,.hair1:before,.hair2:before,.hair:after,.hair1:after,.hair2:after{content:''}

.hair{left:138px;bottom:auto;top:26px;z-index:1}
.hair::before{left:10px;width:92px;height:52px;border-radius:0px 60px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair::after{left:106px;width:60px;height:103px;border-radius:69px 0 0px 0;box-shadow:inset 6px 0px 0 -4px #000}

.hair1{left:15px;width:91px;height:81px;border-radius:0px 70px 0 0;box-shadow:inset -6px 0px 0 -5px #000}
.hair1::before{left:27px;width:63px;height:96px;border-radius:0px 70px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}
.hair1::after{left:18px;width:70px;height:82px;border-radius:0px 100px 0px 0;box-shadow:inset -6px 0px 0 -4px #000}

.hair2, .hair2::before, .hair2::after{width:100px;border-radius:200px 0 0 0;box-shadow:inset 6px 0 0 -4px #000}
.hair2{left:108px;height:98px}
.hair2::before{left:0;height:117px}
.hair2::after{left:0;height:63px}


.body{width:488px;height:488px;background:#DFC047;border-radius:111px;z-index:0;top:0;position:absolute;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(252,255,255, .3);}
.body::before{content:'';width:187px;height:111px;border-radius:100%;position:absolute;left:153px;top:294px;
box-shadow:0 -15px 0 -12px #000;
transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-ms-transform:rotate(4deg);}
.body::after{content:'';width:120%;height:319px;border-radius:64%;position:absolute;bottom:-196px;left:-10%;background:#5482AA;}

.monocle{width:202px;height:202px;position:absolute;top:47px;left:143px;border-radius:100%;
background:linear-gradient(to bottom right, #A3A29F, #828282);
background:-webkit-linear-gradient(top left, #A3A29F, #828282);}
.monocle::before,
.monocle::after{content:'';z-index:-1;position:absolute;display:block;height:0;width:30px;top:31px;
border-bottom:144px solid #2A2A2A;border-left:5px solid transparent;border-right:5px solid transparent;left:-91px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);}
.monocle::after{left:auto;right:-91px;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);}

.eye{width:160px;height:160px;background:#F3DE90;overflow:hidden;position:absolute;left:21px;top:21px;border-radius:100%}
.eye::before{content:'';width:160px;height:137px;border-radius:100%;background:#F3F0E7;position:absolute;top:7px;
animation:closeEye 10s infinite linear;
-webkit-animation:closeEye 10s infinite linear}
.eye::after{content:'';width:46px;height:46px;background:#624123;border-radius:100%;position:absolute;top:70px;left:61px;
animation:moveEye 10s infinite linear;
-webkit-animation:moveEye 10s infinite linear}


.banana{width:200px;height:200px;background:#FDBC1A;border-radius:100%;box-shadow: inset -16px 0 0 #E9AE22;position:absolute;
top:-200px;left:40px;
transform:rotate(21deg);
-webkit-transform:rotate(21deg);
-ms-transform:rotate(21deg);
animation:hideBanana 10s infinite linear;
-webkit-animation:hideBanana 10s infinite linear;}
.banana::before{content: '';width:400px;height:400px;border-radius:100%;position:relative;top:-152px;left:-243px;display:block;
background:#86CDEE;box-shadow:0 -5px 0 0px #968153}
.banana::after{content: '';display:block;width:15px;height:14px;border-radius:0;background:#7C6229;position:absolute;top:14px;
left:149px;box-shadow: inset 6px 0 0 0 rgba(255,255,255, .2);
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);}


/*Eyelid Animation*/
@-webkit-keyframes closeEye{
  0% {height:137px;top:7px;}
  20%{height:60px;top:60px;}
  39%{height:60px;top:60px;}
  40%{height:137px;top:7px;}
}
@keyframes closeEye{
  0% {height:137px;top:7px;}
  20%{height:60px;top:60px;}
  39%{height:60px;top:60px;}
  40%{height:137px;top:7px;}
}
/*Pupil Animation*/
@-webkit-keyframes moveEye{
  39%{top:70px;left:61px;}
  40%{top:34px;left:81px;}
  50%{top:34px;left:81px;}
  51%{top:34px;left:21px;}
  60%{top:34px;left:21px;}
  61%{top:70px;left:61px;}
}
@keyframes moveEye{
  39%{top:70px;left:61px;}
  40%{top:34px;left:81px;}
  50%{top:34px;left:81px;}
  51%{top:34px;left:21px;}
  60%{top:34px;left:21px;}
  61%{top:70px;left:61px;}
}
/*Do the Banana Dance*/
@-webkit-keyframes hideBanana{
  20%{top:-200px;left:40px;margin-left:0px;}
  40%{top:20px;left:40px;}
  50%{left:40px;margin-left:0px;}
  51%{left:100%;margin-left:-240px;}
  60%{top:20px;left:100%;margin-left:-240px;}
  61%{top:-200px;left:100%;margin-left:-240px;}
}
@keyframes hideBanana{
  20%{top:-200px;left:40px;margin-left:0px;}
  40%{top:20px;left:40px;}
  50%{left:40px;margin-left:0px;}
  51%{left:100%;margin-left:-240px;}
  60%{top:20px;left:100%;margin-left:-240px;}
  61%{top:-200px;left:100%;margin-left:-240px;}
}

Banyak juga ya script cssnya hehehe, jika semua file sudah di buat silahkan jalankan file index.html
dan lihat apa yang terjadi di browsermu :D

mohon maaf jika tidak ada demonya hehe :)
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua



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

0 Response to " Animasi Minion Dengan CSS3 "

Posting Komentar

Langganan: Posting Komentar ( Atom )