quang cao hosting

Cách làm hiệu ứng loading theo kiểu Windows phone với CSS3

Xem: 986    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 6 đánh giá ) File đã được kiểm thử

Nếu các bạn đã cảm thấy chán với các kiểu hiệu ứng loading cho trang web được làm từ các ảnh với đuôi .gif. Hoặc không còn thích dùng cách mà mình đã giới thiệu là Tạo hiệu ứng loading theo phong cách Facebook bằng CSS3 . Thì hôm nay, trong bài viết này, mình sẽ tiếp tục chia sẻ cho các bạn một hiệu ứng loading nữa làm bằng CSS3. Nhưng lần này là theo phong cách Windows phone.

Thủ thuật để tạo ra hiệu ứng loading này cũng đơn giản thôi, đầu tiên chúng ta sẽ cần đoạn html như sau :

<span>Loading</span>
    <span class="l-1"></span>
    <span class="l-2"></span>
    <span class="l-3"></span>
    <span class="l-4"></span>
    <span class="l-5"></span>
    <span class="l-6"></span>

Và đây là toàn bộ đoạn CSS giúp các bạn tạo hiệu ứng loading

span {
    display: block;
    margin: 0 auto;
}
 
span[class*="l-"] {
    height: 4px; width: 4px;
    background: #000;
    display: inline-block;
    margin: 12px 2px;
 
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
 
    -webkit-animation: loader 4s infinite;
    -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -webkit-animation-fill-mode: both;
    -moz-animation: loader 4s infinite;
    -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -moz-animation-fill-mode: both;
    -ms-animation: loader 4s infinite;
    -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -ms-animation-fill-mode: both;
    animation: loader 4s infinite;
    animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    animation-fill-mode: both;
}
 
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
 
@-webkit-keyframes loader {
    0% {-webkit-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-webkit-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}
 
@-moz-keyframes loader {
    0% {-moz-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-moz-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}
 
@-keyframes loader {
    0% {-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}
 
@-ms-keyframes loader {
    0% {-ms-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-ms-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}

Chìa khóa chính trong việc tạo hiệu ứng là tận dụng animation có sẵn trong CSS3. Mình hy vọng qua bài viết này, các bạn sẽ có thêm lựa chọn cho hiệu ứng loading trong trang web hay blog của mình. Đồng thời cũng là nguồn tài liệu tham khảo cho các bạn có nhu cầu tìm hiểu kỹ hơn về CSS3 và những thuộc tính của nó mang lại.

Chúc các bạn thành công !

Cách làm hiệu ứng loading theo kiểu Windows phone với CSS3

Cách làm hiệu ứng loading theo kiểu Windows phone với CSS3 Đăng ngày 11-08-2014  Nếu các bạn đã cảm thấy chán với các kiểu hiệu ứng loading cho trang web được làm từ các ảnh với đuôi .gif. Hoặc không còn thích dùng cách mà mình đã giới thiệu là Tạo hiệu ứng loading theo phong cách Facebook bằng CSS3 . Thì hôm nay, trong bài viết này, mình sẽ tiếp tục chia sẻ cho các bạn một hiệu ứng loading nữa làm bằng CSS3. Nhưng lần này là theo phong cách Windows phone. 5/10 986

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Số di động (Hotline): 085.99999.25
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: 085.99999.25;