Hiệu ứng Loading với CSS3

•Mô tả: Tut này được viết bằng CSS3 với các hiệu ứng di chuyển đơn giản
•Demo:http://jdemo01.1talk.net
•Yêu cầu: Trình duyệt hỗ trợ CSS3
•Ghi chú: Không đem bán @@!
•Cách cài đặt: ACP >> Display >> Template >> overal_header(dùng cho tất cả các trang) hoặc index_body(dùng cho trang chính) >> Dán code 1 vào trước thẻ (dùng overal_header) hoặc sau {JAVASCRIPT}(dùng index_body) >> Dán Code 2 vào sau đoạn

Code:

<!-- END saut -->
                                    <!-- END giefmod_index1 -->
                                 </div>

(nếu dùng overal_header) hoặc dán Code 2 vào sau Code 1(nếu dùng index_body) >> Chấp nhận >> Nhấn nút để xem thử. Nếu ứng ý thì nhấn :add: , không ưng thì xóa đi.
•Code 1:

Code:

  <style type="text/css">
/*Loading CSS by Juskteez*/
    .loadingfont
{
position:fixed;
font-family: 'Righteous', cursive;
width:100%;
padding:10px;
left:0px;
top:3000px;
opacity:0.0;
z-index:1;
animation:myfi 4s;
-moz-animation:myfi 4s; /* Firefox */
-webkit-animation:myfi 4s; /* Safari and Chrome */
}

@keyframes myfi
{
0%  {left:0px;top:0;opacity:1;}
25%  {left:0px;top:0;opacity:1;}
50%  {left:0px;top:0;opacity:1;}
90%  {left:0px;top:0;opacity:1;}
100% {left:0px;top:0;}
}

@-moz-keyframes myfi /* Firefox */
{
0%  {left:0px;top:0;opacity:1;}
25%  {left:0px;top:0;opacity:1;}
50%  {left:0px;top:0;opacity:1;}
90%  {left:0px;top:0;opacity:1;}
100% {left:0px;top:0;}
}

@-webkit-keyframes myfi /* Safari and Chrome */
{
0%  {left:0px;top:0;opacity:1;text-shadow:0px 0px 10px #ffffff;}
25%  {left:0px;top:0;opacity:1;text-shadow:0px 0px 20px #ffffff;}
50%  {left:0px;top:0;opacity:1;text-shadow:0px 0px 10px #ffffff;}
75%  {left:0px;top:0;opacity:1;text-shadow:0px 0px 20px #ffffff;}
90%  {left:0px;top:0;opacity:1;}
100% {left:0px;top:0;text-shadow:0px 0px 8px #ffffff;}
}


.loaderup
{
position:fixed;
width:100%;
height:1500px;
background:black;
top:-1520px;
left:0px;
z-index:1;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
0%  {top:0px;}
25%  {top:0px;}
50%  {top:0px;}
75%  {top:0px;}
100% {top:-1520px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%  {top:0px;}
25%  {top:0px;}
50%  {top:0px;}
75%  {top:0px;}
100% {top:-1520px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%  {top:0px;}
25%  {top:0px;}
50%  {top:0px;}
75%  {top:0px;}
100% {top:-1520px;}
}
.loaderdown
{
position:fixed;
width:100%;
height:1500px;
background:black;
bottom:-1520px;
left:0px;
z-index:1;
animation:mysecond 5s;
-moz-animation:mysecond 5s; /* Firefox */
-webkit-animation:mysecond 5s; /* Safari and Chrome */
}

@keyframes mysecond
{
0%  {bottom:1500px;}
25%  {bottom:1500px;}
50%  {bottom:1500px;}
75%  {bottom:1500px;}
100% {bottom:-1500px;}
}

@-moz-keyframes mysecond /* Firefox */
{
0%  {bottom:1500px;}
25%  {bottom:1500px;}
50%  {bottom:1500px;}
75%  {bottom:1500px;}
100% {bottom:-1500px;}
}

@-webkit-keyframes mysecond /* Safari and Chrome */
{
0%  {bottom:1500px;}
25%  {bottom:1500px;}
50%  {bottom:1500px;}
75%  {bottom:1500px;}
100% {bottom:-1500px;}
}
</style>

•Code 2:

Code:


<div class="loaderdown"></div>
<div class="loaderup"></div>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="loadingfont" style="height: 100%; width: 100%; ">
   <tbody>
      <tr>
         <td style="text-align: center; ">
            <strong><span style="font-size:48px;"><span style="color: rgb(255, 255, 255); ">Loading</span></span></strong></td>
      </tr>
   </tbody>
</table>