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í :)
0 Comments:
Post a Comment