Thứ Hai, 28 tháng 12, 2015

hieu ung chay banh rang

12/28/2015 12:25:00 CH hieu-ung-web No comments

Tạo hiệu ứng chạy bánh răng bằng CSS3 nâng cao | hoangcode Programming Blog, Huong Dan, jQuery, Ajax, PHP, MySQL and Demo

Tạo hiệu ứng chạy bánh răng bằng CSS3 nâng cao

Leave a Comment

[Chia sẻ] cùng các bạn một hiệu ứng được tạo ra từ CSS3 dựa trên các animation,keyframes để tạo chuyển động cho hai img hiệu ứng bánh răng. Trong ví dụ này sẽ kết hợp CSS thuần và những property nâng cao trong CSS 3.

Bước 1 : Tạo HTML

<!DOCTYPE html>
<html>
  <head>
  </head>
 <body>
    <div id="chuyen_dong">
     <div id="local_img">
     </div>
     <div id="local_img_big">
     </div>
    </div>
</body>
</html>

Bước 2: Tạo CSS

<style type="text/css">
#chuyen_dong{width:500px; margin:0 auto;
}
#local_img{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwKdxiFggySTaQab74zoTnWaif3jDZ0fdo9x3PNpziWqDbmQu0CVPP5LwtibB0yzoIW6CQs1QREsR_oyr0i80apmOFmlF_ugR1WtpUwt45S5bfD8Zd-2QuKpNCOYvSs04vIjytiMV-nGs/s1600/local_img.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;
}
 
#local_img_big{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBAj-6FbzU-6isvHpU8Yfg0SGoIC4Cib6cZsGLTcUYGMTjhfTQTuAF-OzjEAoBHQtG7rLJl1PeXXQCVGGw-YUk8Jp9I4Lf8iwPtk4f137rcZLNYoATyivb8SLD0lacbHU4Mkb0EGDyz6U/s1600/local_img_big.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>

Live Demo Download Script