Hiệu ứng bánh răng chỉ với Css3, tại sao không :)

Chúng ta đã quá quen với các hiệu ứng được thực hiện bằng javascript, từ những hiệu ứng chuyển động phức tạp như popup, hình ảnh bay vào hoặc bay ra khỏi trang..

Nhưng có một cách nhẹ nhàng và đơn giản để làm các hiệu ứng chỉ với css3 và 2 ảnh bánh răng (không phải ảnh gif), trong bài viết này tôi sẽ giới thiệu các làm hiệu ứng bánh răng quay dựa trên các animation, keyframes.




1. Đầu tiên ta tạo HTML:

<!DOCTYPE html>
<html>
  <head>
  </head>
 <body>
    <div id="chuyen_dong">
     <div id="banh_rang_nho">
     </div>
     <div id="banh_rang_lon">
     </div>
    </div>
 </body>
</html>  

2.  CSS và CSS3 ta làm như sau:

<style type="text/css">
#chuyen_dong{width:500px; margin:0 auto;
}
#banh_rang_nho{
    background-image:url(anh_banh_rang_nho.png); 
    background-repeat:no-repeat;
    width:200px; 
    height:200px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite; margin:0 0 0 -100px;padding:0;
}
 
#banh_rang_lon{
    background-image:url(anh_banh_rang_lon.png); 
    background-repeat:no-repeat;
    width:200px; 
    height:200px;
    -webkit-animation:spin1 4s linear infinite;
    -moz-animation:spin1 4s linear infinite;
    animation:spin1 4s linear infinite;padding:0; margin:-80px 0 0 -10px;
}
 
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } 
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } 
}
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } 
}
 
@-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
}
 </style>  

Thử chạy, ta sẽ thấy điều kỳ diệu, trước kia người thường nghĩ css và html là ngôn ngữ định hình các khung và layout, nó không tạo các hiệu ứng động vui mắt, nhưng css3 và html5 trong nhiều năm qua đã thay đổi suy nghĩ này, ngta có thể làm game bằng html5, làm hiệu ứng vs css3.

Với việc gán spin và spin1 vào các div có ID: #banh_rang_lon và  #banh_rang_nho bằng animation sau đó sử dụng chúng ở  @keyframes ta đã làm được một công việc người ta thường nghĩ dùng ta cần tới js.

Để tham khảo thêm về các hiệu ứng của CSS3, các bạn có thể truy cập vào link sau:  
http://www.w3schools.com/w3css/w3css_animate.asp

Nếu thấy hay hãy like, share, comment vì nó miễn phí :)
If you liked this article

Let's subscribe the updates of Scuti!
Share on Google Plus

About Nguyễn Đức Lộc

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 Comments:

Post a Comment