CuDemVN.Wap.Sh
GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
Share code hiệu ứng Loading giống với Facebook bằng CSS3
 |  RoSino18k  
29-05-2016
|
Gần như tất cả mọi người hiện nay đang dùng Facebook và chắc chắn bạn cũng đã từng thấy “hiệu ứng loading” của facebook xuất hiện khi bạn đưa một đường dẫn bất kỳ vào khung soạn thảo. Trong bài viết này mình sẽ chia sẻ cho các bạn cách để tạo ra hiệu ứng loading giống với facebook chỉ đơn giản bằng CSS3.
→demo:
Hiệu ứng Loading Facebook
Để tạo được hiệu ứng loading giống như facebook mà không cần dùng bất kỳ hình ảnh động nào, đầu tiên chúng ta xây dựng trước với HTML đơn giản:
<div class="loader">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
Sau khi đã xây dựng cấu trúc loading với HTML, chúng ta sẽ sử dụng thuộc tính keyframes trong CSS3 để tạo ra hiệu ứng nêu trên, bắt đầu định dạng chúng với CSS3 như sau:
# Bắt đầu với CSS cơ bản:
/* FACEBOOK LOADER */
.loader { width:32px; height:32px; }
/* Initial state */
.bar {
background-color:#99aaca; border:1px solid #96a6c9; float:left;
margin-right:4px; margin-top:6px; width:6px; height:18px;
/* Set the animation properties */
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: loadingbar;
}
# Tạo ra hiệu ứng delay giữa keyframes 2 và 3
.loader .bar:nth-child(2) { animation-delay: 0.1s; }
.loader .bar:nth-child(3) { animation-delay: 0.2s; }# The actual animation – Sử dụng thuộc tính keyframes của CSS3
@keyframes loadingbar {
0% { }
10% { margin-top:5px; height:22px; border-color:#d1d8e6; background-color:#bac5db; }
20% { margin-top:0px; height:32px; border-color:#d1d7e2; background-color:#c6ccda; }
30% { margin-top:1px; height:30px; border-color:#d1d8e6; background-color:#bac5db; }
40% { margin-top:3px; height:26px; }
50% { margin-top:5px; height:22px; }
60% { margin-top:6px; height:18px; }
70% { }
/* Missing frames will cause the extra delay */
100% { }
}Đơn giản vậy thôi, bạn có thể xem demo để hiểu rõ hơn, thêm các tiền tố như -webkit-, -moz- … đằng trước thuộc tính keyframes cho những trình duyệt thích hợp. Chúc các bạn thành công!
Nguồn: MeLyWeb.Net
Lượt xem: 1212 
Đánh giá: 4.5/ 5, 1212 bình chọn
| - Chia sẻ: |   |
Link:
Còn “nhiều” Lắm!