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

Tạo code hiệu ứng loading thay đổi khung hình cực chuẩn chỉ với các thuộc tính CSS3

Admin* RoSino18k *
* 29-05-2016

Chúng ta chắc chắn đã biết hiệu ứng loading là gì, ở bài trước mình có giới thiệu cách làm như thế nào để *Tạo hiệu ứng “Loading” giống với Facebook bằng CSS3, tiếp tục hôm nay mình sẽ chia sẻ cho các bạn một code hiệu ứng loading cực chuẩn chỉ với CSS3, không sử dụng một hình ảnh nào.

Tạo code hiệu ứng loading thay đổi khung hình cực chuẩn chỉ với các thuộc tính CSS3
[Tải ảnh]


→Demo: *Hiệu ứng Loading CSS3

Đầu tiên chúng ta vẫn cần tạo cấu trúc bằng HTML trước, sau đó mới sử dụng CSS3:
<div class="container">
<div class="part"></div>
<div class="part"></div>
<div class="part"></div>
<div class="part"></div>
<div class="part"></div>
</div>


Đã có bố cục cơ bản bằng HTML, bây giờ chúng ta bắt đầu xây dựng bố cục cho nó với CSS, đầu tiên chúng ta sử dụng đoạn CSS dưới đây để định dạng cứng lại nội dung chúng ta cần hiển thị:
html {
height: 100%;
min-height: 100%;
}
body {
height: 100%;
background: #51b8e2;
}
.container {
width: 100%;
height: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}


Tiếp tục, để có những hình khối giống như với demo, chúng ta cần sử dụng thuộc tính transform và thuộc tính border-radius của CSS3 để tạo ra nó:
.container .part {
width: 40px;
height: 40px;
margin-left: 45px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #51b8e2;
border-radius: 4px;
border: 2px solid #fff;
-webkit-transition: background 100ms linear;
transition: background 100ms linear;
-webkit-animation: change 950ms linear infinite;
animation: change 950ms linear infinite;
}


Và cuối cùng, muốn tạo ra hiệu ứng loading chuyển động chỉ với CSS, chúng ta sử dụng thuộc tính animation-delaykeyframes giống như ở bài trước:
.container .part:nth-child(1) {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.container .part:nth-child(2) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.container .part:nth-child(3) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.container .part:nth-child(4) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.container .part:nth-child(5) {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
@-webkit-keyframes change {
0% {
border-radius: 4px;
}
17.5% {
border-radius: 4px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 4px;
}
100% {
border-radius: 4px;
}
}
@keyframes change {
0% {
border-radius: 4px;
}
17.5% {
border-radius: 4px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 4px;
}
100% {
border-radius: 4px;
}
}


Như vậy, toàn bộ CSS3 chúng ta sử dụng để tạo hiệu ứng loading này bao gồm:

html {
height: 100%;
min-height: 100%;
}
body {
height: 100%;
background: #51b8e2;
}
.container {
width: 100%;
height: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.container .part {
width: 40px;
height: 40px;
margin-left: 45px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #51b8e2;
border-radius: 4px;
border: 2px solid #fff;
-webkit-transition: background 100ms linear;
transition: background 100ms linear;
-webkit-animation: change 950ms linear infinite;
animation: change 950ms linear infinite;
}
.container .part:nth-child(1) {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.container .part:nth-child(2) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.container .part:nth-child(3) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.container .part:nth-child(4) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.container .part:nth-child(5) {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
@-webkit-keyframes change {
0% {
border-radius: 4px;
}
17.5% {
border-radius: 4px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 4px;
}
100% {
border-radius: 4px;
}
}
@keyframes change {
0% {
border-radius: 4px;
}
17.5% {
border-radius: 4px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 4px;
}
100% {
border-radius: 4px;
}
}


Ở trên là một hiệu ứng chuyển động sử dụng các thuộc tính có trong CSS3 tạo nên, hy vọng với ý tưởng này, các bạn sẽ có thể sáng tạo ra nhiều hiệu ứng độc đáo khác từ CSS3. Chúc các bạn thành công! Tiếp theo mình sẽ share hiệu ứng loading Window cũng hoàn toàn bằng CSS3 các bạn hãy chú í đón đọc nhé.

Nguồn: MeLyWeb.Net
↑↑ Lượt xem: 321
score
Đánh giá: 4.5/ 5, 321 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-321]

Old school Swatch Watches