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

Sử dụng CSS3 tạo hiệu ứng loading theo phong cách của Window

RoSino18k

29-05-2016

Tại Cú Đêm Việt Nam đã có những bài viết hướng dẫn tạo hiệu ứng loading cực đẹp, nếu bạn không thích những hiệu ứng của các bài trước, thì ở bài này mình sẽ tiếp tục chia sẻ cho các bạn cách tạo loading theo phong cách của window. Chúng ta tạo ra loading đơn giản chỉ với các thuộc tính CSS3.

→demo:

Loading phong cách Window

[Tải ảnh]

Các bạn có thể xem demo, để làm được như vậy, đầu tiên chúng ta vẫn cần xây dựng cấu trúc bằng HTML trước:

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

Chúng ta sẽ sử dụng thuộc tính animation của CSS3 để tạo ra hình ảnh cho hiệu ứng loading.

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;

}

Tiếp theo là animation-delay để tạo ra sự chuyển động giữa các keyframe:

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;}

Cuối dùng đến keyframe:

kit-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;}

Như vậy, toàn bộ CSS mà chúng ta sử dụng bao gồm:

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;}

Như vậy, chúng ta đã tận dụng được thuộc tính animation trong CSS3 để tạo ra hiệu ứng loading giống với hiệu ứng loading của window phone mà không cần phải sử dụng 1 ảnh gif nào. Với hiệu ứng này, hy vọng bạn sẽ có một kết hợp thích hợp cho website của bạn, ví dụ như bạn có thể áp dụng cho

hiệu ứng loading khi chưa tải xong trang chẳng hạn.
Chúc các bạn thành công.

Nguồn: MeLyWeb.Net