Có gì mới trên Blog StarThảo-IT?

Cập nhật những thay đổi, cập nhật mới trên Blog StarThảo-IT

Menu Game

Kho game online blogspot miễn phí khổng lồ với rất nhiều game độc đáo.

Tiên Ích Online

Có vô vàn tiện ích online ngay trên Blog cho các bạn sử dụng

Và còn nhiều điều hot nữa

Đang được cập nhật...

code [Hướng Dẫn] tạo hiệu ứng loading giống StarThảo-IT

[Hướng Dẫn] tạo hiệu ứng loading giống StarThảo-IT

August 21, 2017 0 comments
Chia sẻ

Chào các bạn, hôm nay StarThảo-IT sẽ share cho các bạn một hiệu ứng loading khá chất.
Demo đây, do mình đã gỡ em nó xuống :)

Bắt đầu luôn nhé!
Bước 1: https://www.blogger.com => Chủ đề => HTML
Bước 2: Các bạn tìm thẻ  <body> sau đó các bạn thêm đoạn code sau vào sau nó:


<style>
.spinner{background:rgba(255,255,255,.98);z-index:99999;position: fixed; width: 100%; top: 0; height: 100%}
.windows8{position:absolute;width:50px;height:50px;margin:auto;top:50%;left:50%;transform:translate(-50%,-50%)}
.windows8 .wBall{position:absolute;width:47px;height:47px;opacity:0;transform:rotate(225deg);-o-transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);animation:orbit 6.96s infinite;-o-animation:orbit 6.96s infinite;-ms-animation:orbit 6.96s infinite;-webkit-animation:orbit 6.96s infinite;-moz-animation:orbit 6.96s infinite}
.windows8 .wBall .wInnerBall{position:absolute;width:6px;height:6px;background:rgb(102,102,102);left:0;top:0;border-radius:6px}
.windows8 #wBall_1{animation-delay:1.52s;-o-animation-delay:1.52s;-ms-animation-delay:1.52s;-webkit-animation-delay:1.52s;-moz-animation-delay:1.52s}
.windows8 #wBall_2{animation-delay:0.3s;-o-animation-delay:0.3s;-ms-animation-delay:0.3s;-webkit-animation-delay:0.3s;-moz-animation-delay:0.3s}
.windows8 #wBall_3{animation-delay:0.61s;-o-animation-delay:0.61s;-ms-animation-delay:0.61s;-webkit-animation-delay:0.61s;-moz-animation-delay:0.61s}
.windows8 #wBall_4{animation-delay:0.91s;-o-animation-delay:0.91s;-ms-animation-delay:0.91s;-webkit-animation-delay:0.91s;-moz-animation-delay:0.91s}
.windows8 #wBall_5{animation-delay:1.22s;-o-animation-delay:1.22s;-ms-animation-delay:1.22s;-webkit-animation-delay:1.22s;-moz-animation-delay:1.22s}
@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)}}
@-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)}}
@-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)}}
@-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)}}
</style>
<div class='spinner'><div class='windows8'>
<div class='wBall' id='wBall_1'>
<div class='wInnerBall'/>
</div>
<div class='wBall' id='wBall_2'>
<div class='wInnerBall'/>
</div>
<div class='wBall' id='wBall_3'>
<div class='wInnerBall'/>
</div>
<div class='wBall' id='wBall_4'>
<div class='wInnerBall'/>
</div>
<div class='wBall' id='wBall_5'>
<div class='wInnerBall'/>
</div>
</div></div>
<script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.spinner&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 0)
            }, 0)
        });
    </script>
<!-- END Loading -->
Bước 3: Lưu mẫu và xem kết quả.
Chúc các bạn thành công.
Labels:
https://starthao-it.blogspot.com/2017/08/huong-dan-tao-hieu-ung-loading-giong.html
StarThảo-IT

Người Phán Xử:

Ước mơ giống như những vì sao… ta có thể không bao giờ chạm tay vào được, nhưng nếu đi theo chúng, chúng sẽ dẫn ta đến vận mệnh của mình

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Hãy xem hướng dẫn để bình luận theo đúng ý nhé.

Hướng dẫn bình luận

Tiện ích

  • Dùng những công cụ ở dưới để viết chữ theo ý muốn, chèn link

Chèn hình ảnh

  • Nếu muốn chèn hình ảnh, video từ Youtube vào khung bình luận, bạn chỉ việc paste trực tiếp link hình ảnh, link video youtube vào đó

Upload ảnh

Chèn một đoạn Code

  • Đầu tiên sử dụng công cụ mã hóa code phía dưới để mã hóa đoạn code muốn chèn.
    Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code] hoặc [pre] CODE_ĐÃ_MÃ_HÓA [/pre] rồi paste vào khung bình luận
Hiện EmoticonsẨn Emoticons Hiện Upload ảnhẨn Upload ảnh
Click vào icon để bôi đen mã, sau đó copy mã
Ctrl + V hoặc Right click chọn Paste vào ô nhận xét để chèn Emoticon
Nếu dùng nhiều Emoticon giữa chúng ngăn cách bằng 1 dấu cách

Mã Hóa Code
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa
Subscribe to: Post Comments ( Atom )