Google Doodle animation bằng CSS3

Hẳn là các bạn đã từng quen với các hiệu ứng động mà Google thường mang đến cho chúng ta ngay trên trang chủ của họ, được gọi với cái tên là Google Doodle. Hôm nay chúng ta sẽ bắt chước làm một kiểu đơn giản của họ, điều đặc biệt trong hiệu ứng này là tất cả đều được làm bằng html và CSS3, không sử dụng bất kì một đoạn script nào.

HTML

Đầu tiên, chúng ta cần có khung html như sau :

<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>

Trong đoạn html bên trên chúng ta có sử dụng vài hình ảnh , và các ảnh này các bạn có thể save tại mục demo hoặc tải về máy tại mục download nhé.

CSS

Đây chính là phần trọng tâm của bài viết này, các bạn tham khảo chi tiết để thấy được những khả năng mà CSS3 mang lại cho chúng ta nhé.

* {margin: 0; padding: 0;}



#logo {position: relative;}



.horse {

    width: 469px; height: 54px;

    background: url(http://www.google.co.in/logos/2012/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;}

Mình hy vọng qua bài viết này, các bạn sẽ hiểu rõ hơn về những tính  năng có trong CSS3 cũng như cách làm hiệu ứng động với thuộc tính animation.