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ữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Share code hiệu ứng Loading giống với Facebook bằng CSS3

Admin* 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
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>

Share code hiệu ứng Loading giống với Facebook bằng CSS3
[Tải ảnh]


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: 1136
score
Đánh giá: 4.5/ 5, 1136 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-1136]

Insane