quang cao hosting

Hướng dẫn làm Ngựa chạy Google Doodle animation bằng CSS3

Xem: 1347    Tải: 3   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Game - Giải trí

9 điểm   ( 8 đánh giá ) File đã được kiểm thử
Miễn Phí [megacode]huong-dan-lam-ngua-chay-google.rar (20.92 KB)
Tải miễn phí
Xem Demo

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-lam-ngua-chay-google.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

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.

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.

Chúc các bạn thành công !

Hướng dẫn làm Ngựa chạy Google Doodle animation bằng CSS3

Hướng dẫn làm Ngựa chạy Google Doodle animation bằng CSS3 Đăng ngày 03-08-2014  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. 1.125/10 1347

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2021. All rights reserved. Bản quyền thuộc VinaGon
Email: info@vinagon.com
Hotline: 086.924.3838