Membuat Google Doodle dengan CSS 3

Masih ingat dengan gambar yang disamping ini ??? tentu saja yang sering buka google pasti masih ingat.

Setiap ada even Google sangat kreatif membuat animasi-animasi. Kita cuman bisa mengaguminya saja tapi tidak tahu cara pembuatannya.

Kemarin saya menemukan tutorialnya, kali ini saya akan tulis ulang dalam bahasa indonesia.

Untuk membuatnya kalian harus mempersiapkan image-image ini ::

Foto kuda


Frame


Image Play

kemudian kalian buat file htmlnya, tulis code seperti dibawah ini ::

 
<html>
<head>
<link href="file.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
 <div class="frame">
  <img src="muybridge12-hp-v.png" />
 </div>
 
 <!-- The play button now -->
 <label for="play_button" id="play_label"></label>
 <input type="checkbox" id="play_button" name="play_button" />
 
 <!-- The image for the play button 
 The sibling selector works in the forward direction only.-->
 <span id="play_image">
  <img src="muybridge12-hp-p.jpg" />
 </span>
 
 <div class="horse"></div>
 <div class="horse"></div>
 <div class="horse"></div>
</div>
</body>
</html>

Foto kuda, frame, Image Play harus satu folder dengan htmlnya.

selanjutnya kita tinggal membuat cssnya dengan nama file.css, ikuti source code dibawah ini ::

 
* {margin: 0; padding: 0;}

#logo {position: relative;}

.horse {
 width: 469px; height: 54px;
 background: url(muybridge12-hp-f.jpg);
}

.frame {position: absolute; left: 0; top: 0; z-index: 1;}

/*Clicking the label will select the checkbox which will be used to
trigger the animation of the horses*/

#play_button:checked ~ .horse {
 -webkit-animation: horse-ride 0.5s steps(12, end) infinite;
 -webkit-animation-delay: 2.5s;
 -moz-animation: horse-ride 0.5s steps(12, end) infinite;
 -moz-animation-delay: 2.5s;
 /*Lets add a pre-anim which will start slowly and merge into the fast animation*/
 background-position: -2412px 0;
 -webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
 -moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

/*Hide the play image*/
#play_button:checked ~ #play_image img{
 left: -68px;
 -webkit-transition: all 0.5s ease-in;
 -moz-transition: all 0.5s ease-in;
}

/*804px is the width of the image with 12 horse frames
steps are used in the animation to have the best animation effect
it will position the horse frames accurately in the boxes instead of 
tweening it px by px all the way through*/
@-webkit-keyframes horse-ride {
 0% {background-position: 0 0;}
 100% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
 0% {background-position: 0 0;}
 100% {background-position: -804px 0;}
}

#play_button {display: none;}
#play_label {
 width: 67px; height: 54px;
 display: block;
 position: absolute; left: 201px; top: 54px; z-index: 2;
}
#play_image {position: absolute; left: 201px; top: 54px; z-index: 0;
 overflow: hidden; width: 68px; height: 55px;
}
#play_image img {position: absolute; left: 0; top: 0;}

Selesai.

Bagaimana mudah sajakan ???

Salam Hangat

Roy Purbo

71 comments:

Kategori

Blog Archive

Recent Posts

Followers