السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
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 .
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 .
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
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
wa'alaikumsalam .. izin dipasang kang css nya
Replyboleh nih di coba gan thanks yah
Replysaya coba yahh gan, :)
Replyassik kang.
Replyblog ini bisa jadi referensi ane, kebetulan ane jurusan RPL, wajib nyari blog yang kya gini.
Tester gan, ane coba.
Replyklo bisa karakter lain juga di share gan hehe
Lucu gan hehehe ijin coba yah mas bro
Replykeren gan .. di tunggu yg lqin nya :)
ReplyBoleh saya coba ya :D
Replybagus tuh minionnya =D
Replywah mantap nih :D ini kalo mau nyoba di blog apa aplikasi? :D
Replyijin nyoba gan kalo bisa pake demo dong gan :D
Replywah gan mantep nih, blog saya jadi unyu unyu.
ReplyKeren gan..
Replykeren
Replyijin bookmark gan :) buat nanti dicoba :D
Replynice artikel gan
Reply