Thứ Sáu, ngày 04 tháng 12 năm 2015

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

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





DEMO Hiệu Ứng Loading Windows 8


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 {
   positionrelative;
   width90px;
   height:90px;
   displayblock;
   margin50px;
}

.vuload .vuitems {
   positionabsolute;
   width86px;
   height86px;
   opacity0;
   -moz-transformrotate(225deg);
   -moz-animationorbit 4.4s infinite;
   -webkit-transformrotate(225deg);
   -webkit-animationorbit 4.4s infinite;
   -ms-transformrotate(225deg);
   -ms-animationorbit 4.4s infinite;
   -o-transformrotate(225deg);
   -o-animationorbit 4.4s infinite;
   transformrotate(225deg);
   animationorbit 4.4s infinite;
}

.vuload .vuitems .comp{
   positionabsolute;
   width11px;
   height11px;
   background#000000;
   left:0px;
   top:0px;
   -moz-border-radius11px;
   -webkit-border-radius11px;
   -ms-border-radius11px;
   -o-border-radius11px;
   border-radius11px;
}

.vuload #vuitems_1 {
   -moz-animation-delay0.96s;
   -webkit-animation-delay0.96s;
   -ms-animation-delay0.96s;
   -o-animation-delay0.96s;
   animation-delay0.96s;
}

.vuload #vuitems_2 {
   -moz-animation-delay0.19s;
   -webkit-animation-delay0.19s;
   -ms-animation-delay0.19s;
   -o-animation-delay0.19s;
   animation-delay0.19s;
}

.vuload #vuitems_3 {
   -moz-animation-delay0.38s;
   -webkit-animation-delay0.38s;
   -ms-animation-delay0.38s;
   -o-animation-delay0.38s;
   animation-delay0.38s;
}

.vuload #vuitems_4 {
   -moz-animation-delay0.58s;
   -webkit-animation-delay0.58s;
   -ms-animation-delay0.58s;
   -o-animation-delay0.58s;
   animation-delay0.58s;
}

.vuload #vuitems_5 {
   -moz-animation-delay0.77s;
   -webkit-animation-delay0.77s;
   -ms-animation-delay0.77s;
   -o-animation-delay0.77s;
   animation-delay0.77s;
}

@-moz-keyframes orbit {
   0% {
   opacity1;
   z-index:99;
   -moz-transformrotate(180deg);
   -moz-animation-timing-function: ease-out;
   }

   7% {
   opacity1;
   -moz-transformrotate(300deg);
   -moz-animation-timing-function: linear;
   -moz-origin:0%;
   }

   30% {
   opacity1;
   -moz-transform:rotate(410deg);
   -moz-animation-timing-function: ease-in-out;
   -moz-origin:7%;
   }

   39% {
   opacity1;
   -moz-transformrotate(645deg);
   -moz-animation-timing-function: linear;
   -moz-origin:30%;
   }

   70% {
   opacity1;
   -moz-transformrotate(770deg);
   -moz-animation-timing-function: ease-out;
   -moz-origin:39%;
   }

   75% {
   opacity1;
   -moz-transformrotate(900deg);
   -moz-animation-timing-function: ease-out;
   -moz-origin:70%;
   }

   76% {
   opacity0;
   -moz-transform:rotate(900deg);
   }

   100% {
   opacity0;
   -moz-transformrotate(900deg);
   }
}

@-webkit-keyframes orbit {
   0% {
   opacity1;
   z-index:99;
   -webkit-transformrotate(180deg);
   -webkit-animation-timing-function: ease-out;
   }

   7% {
   opacity1;
   -webkit-transformrotate(300deg);
   -webkit-animation-timing-function: linear;
   -webkit-origin:0%;
   }

   30% {
   opacity1;
   -webkit-transform:rotate(410deg);
   -webkit-animation-timing-function: ease-in-out;
   -webkit-origin:7%;
   }

   39% {
   opacity1;
   -webkit-transformrotate(645deg);
   -webkit-animation-timing-function: linear;
   -webkit-origin:30%;
   }

   70% {
   opacity1;
   -webkit-transformrotate(770deg);
   -webkit-animation-timing-function: ease-out;
   -webkit-origin:39%;
   }

   75% {
   opacity1;
   -webkit-transformrotate(900deg);
   -webkit-animation-timing-function: ease-out;
   -webkit-origin:70%;
   }

   76% {
   opacity0;
   -webkit-transform:rotate(900deg);
   }

   100% {
   opacity0;
   -webkit-transformrotate(900deg);
   }
}

@-ms-keyframes orbit {
   0% {
   opacity1;
   z-index:99;
   -ms-transformrotate(180deg);
   -ms-animation-timing-function: ease-out;
   }

   7% {
   opacity1;
   -ms-transformrotate(300deg);
   -ms-animation-timing-function: linear;
   -ms-origin:0%;
   }

   30% {
   opacity1;
   -ms-transform:rotate(410deg);
   -ms-animation-timing-function: ease-in-out;
   -ms-origin:7%;
   }

   39% {
   opacity1;
   -ms-transformrotate(645deg);
   -ms-animation-timing-function: linear;
   -ms-origin:30%;
   }

   70% {
   opacity1;
   -ms-transformrotate(770deg);
   -ms-animation-timing-function: ease-out;
   -ms-origin:39%;
   }

   75% {
   opacity1;
   -ms-transformrotate(900deg);
   -ms-animation-timing-function: ease-out;
   -ms-origin:70%;
   }

   76% {
   opacity0;
   -ms-transform:rotate(900deg);
   }

   100% {
   opacity0;
   -ms-transformrotate(900deg);
   }
}

@keyframes orbit {
   0% {
   opacity1;
   z-index:99;
   transformrotate(180deg);
   animation-timing-function: ease-out;
   }

   7% {
   opacity1;
   transformrotate(300deg);
   animation-timing-function: linear;
   origin:0%;
   }

   30% {
   opacity1;
   transform:rotate(410deg);
   animation-timing-function: ease-in-out;
   origin:7%;
   }

   39% {
   opacity1;
   transformrotate(645deg);
   animation-timing-function: linear;
   origin:30%;
   }

   70% {
   opacity1;
   transformrotate(770deg);
   animation-timing-function: ease-out;
   origin:39%;
   }

   75% {
   opacity1;
   transformrotate(900deg);
   animation-timing-function: ease-out;
   origin:70%;
   }

   76% {
   opacity0;
   transform:rotate(900deg);
   }

   100% {
   opacity0;
   transformrotate(900deg);
   }
}

@-o-keyframes orbit {
   0% {
   opacity1;
   z-index:99;
   -o-transformrotate(180deg);
   -o-animation-timing-function: ease-out;
   }

   7% {
   opacity1;
   -o-transformrotate(300deg);
   -o-animation-timing-function: linear;
   -o-origin:0%;
   }

   30% {
   opacity1;
   -o-transform:rotate(410deg);
   -o-animation-timing-function: ease-in-out;
   -o-origin:7%;
   }

   39% {
   opacity1;
   -o-transformrotate(645deg);
   -o-animation-timing-function: linear;
   -o-origin:30%;
   }

   70% {
   opacity1;
   -o-transformrotate(770deg);
   -o-animation-timing-function: ease-out;
   -o-origin:39%;
   }

   75% {
   opacity1;
   -o-transformrotate(900deg);
   -o-animation-timing-function: ease-out;
   -o-origin:70%;
   }

   76% {
   opacity0;
   -o-transform:rotate(900deg);
   }

   100% {
   opacity0;
   -o-transformrotate(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