ChiaSeIT.Mobie.In

CSS3 Hiệu Ứng Loading Đẹp Windows 8 cho mọi Wap/Web

Xin chia sẻ cho các bạn Hiệu Ứng Loading Windows 8 bằng CSS3 khá đẹp. Nếu bạn nào đang làm 1 trang về blog tin học hay công nghệ thì sử dụng hiệu ứng loading này rất hợp lý
Bên dưới mình có để sẵn CSS3HTML các bạn chỉ cần lấy 2 đoạn mã đó dán vào là được.



Phía trên là DEMO cho các bạn tham khảo. Các bạn chỉ cần coppy đoạn code ngắn sau
Dưới đây là CSS

.vuload {
position: relative;
width: 90px;
height:90px;
display: block;
margin: 50px;
}
.vuload .vuitems {
position: absolute;
width: 86px;
height: 86px;
opacity: 0;
-moz-transform: rotate(225deg);
-moz-animation: orbit 4.4s infinite;
-webkit-transform: rotate(225deg);
-webkit-animation: orbit 4.4s infinite;
-ms-transform: rotate(225deg);
-ms-animation: orbit 4.4s infinite;
-o-transform: rotate(225deg);
-o-animation: orbit 4.4s infinite;
transform: rotate(225deg);
animation: orbit 4.4s infinite;
}
.vuload .vuitems .comp{
position: absolute;
width: 11px;
height: 11px;
background: #000000;
left:0px;
top:0px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-ms-border-radius: 11px;
-o-border-radius: 11px;
border-radius: 11px;
}
.vuload #vuitems_1 {
-moz-animation-delay: 0.96s;
-webkit-animation-delay: 0.96s;
-ms-animation-delay: 0.96s;
-o-animation-delay: 0.96s;
animation-delay: 0.96s;
}
.vuload #vuitems_2 {
-moz-animation-delay: 0.19s;
-webkit-animation-delay: 0.19s;
-ms-animation-delay: 0.19s;
-o-animation-delay: 0.19s;
animation-delay: 0.19s;
}
.vuload #vuitems_3 {
-moz-animation-delay: 0.38s;
-webkit-animation-delay: 0.38s;
-ms-animation-delay: 0.38s;
-o-animation-delay: 0.38s;
animation-delay: 0.38s;
}
.vuload #vuitems_4 {
-moz-animation-delay: 0.58s;
-webkit-animation-delay: 0.58s;
-ms-animation-delay: 0.58s;
-o-animation-delay: 0.58s;
animation-delay: 0.58s;
}
.vuload #vuitems_5 {
-moz-animation-delay: 0.77s;
-webkit-animation-delay: 0.77s;
-ms-animation-delay: 0.77s;
-o-animation-delay: 0.77s;
animation-delay: 0.77s;
}
@-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}
30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}
39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}
70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}
75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}
76% {
opacity: 0;
-moz-transform:rotate(900deg);
}
100% {
opacity: 0;
-moz-transform: rotate(900deg);
}
}
@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}
30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}
39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}
70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}
75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}
76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
}
@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}
30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}
39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}
70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}
75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}
76% {
opacity: 0;
-ms-transform:rotate(900deg);
}
100% {
opacity: 0;
-ms-transform: rotate(900deg);
}
}
@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}
30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
} 39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}
70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}
75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}
76% {
opacity: 0;
transform:rotate(900deg);
}
100% {
opacity: 0;
transform: rotate(900deg);
}
}
@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}
30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}
39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}
70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}
75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}
76% {
opacity: 0;
-o-transform:rotate(900deg);
}
100% {
opacity: 0;
-o-transform: rotate(900deg);
}


Còn đây là CODE HTML

<div class="vuload"> <div class="vuitems" id="vuitems_1"> <div class="comp"> </div> </div> <div class="vuitems" id="vuitems_2"> <div class="comp"> </div> </div> <div class="vuitems" id="vuitems_3"> <div class="comp"> </div> </div> <div class="vuitems" id="vuitems_4"> <div class="comp"> </div> </div> <div class="vuitems" id="vuitems_5"> <div class="comp"> </div> </div> </div>


Các bạn cứ áp dụng vào sẽ có được hiệu ứng như trên

Download


Bình luận
Từ Khóa
CSS3 Hiệu Ứng Loading Đẹp Windows 8 cho mọi Wap/Web , Xin, chia, sẻ, cho, các, bạn, [b]Hiệu, Ứng, Loading, Windows, 8, bằng, CSS3[/b], , Tìm hiểu CSS3 Hiệu Ứng Loading Đẹp Windows 8 cho mọi Wap/Web làm theo và học hỏi , Bài viết Hot CSS3 Hiệu Ứng Loading Đẹp Windows 8 cho mọi Wap/Web ,
Cùng Chuyên Mục
Tạo hiệu ứng loading 7 sắc cầu vòng với CSS3
Tạo Login Form giống WordPress Admin với CSS3 và jQuery
Tạo modal window với HTML5 và CSS3
Thiết kế mẫu đồng hồ đếm ngược cực ấn tượng với CSS3
Tạo Tooltip bằng CSS3
Tạo hiệu ứng cầu vòng tuyệt đẹp cho văn bản bằng CSS3
Hướng dẫn làm Form Login style Facebook đẹp
Share Hiệu ứng Preload với CSS3 Đẹp đầy màu sắc cực ảo
Làm thẻ Tiêu đề tự đổi màu với CSS
Tạo hiệu ứng đèn nhấp nháy với Notepad , CSS, JavaScript
Chia sẻ coding miễn phí © 2017
Thiết kế: Mạnh Tuân

2.8% sitemap.xml robots.txt U-ONC-STAT
Pair of Vintage Old School Fru