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ữ
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>
<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;
}
.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; }
.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% { }
}
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
Đánh giá: 4.5/ 5, 1136 bình chọn
Còn “nhiều” Lắm!