Diễn đàn Arduino Việt Nam | Tôi yêu Việt Nam
Hãy cùng đăng nhập hoặc đăng ký vào diễn đàn để cập nhật những bài viết mới và mở hết chức năng của diễn đàn nào!

Share
Go down
avatar
Administrator
Administrator
Tổng số bài gửi : 181
Points : 504
Reputation : 82
Join date : 20/07/2016
Age : 18
Đến từ : Bến Tre
Xem lý lịch thành viênhttp://vidieukhien-vn.webnode.vn/

Hiệu ứng loading theo kiểu Windows phone với CSS3

on Sun May 07, 2017 9:10 pm
Message reputation : 100% (1 vote)

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" . 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 :





Code:
<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 :


Code:
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;}
}
Về Đầu Trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
Forumotion.com | © phpBB | Free forum support | Liên hệ | Report an abuse | Create a blog