Tạo hiệu ứng Loading cùng 4 thầy trò đường tăng

Nay thì mình sẽ làm một trang loading cho blogger. Code này thì nó giúp cho website của chúng ta kéo dài thêm thời gian để giúp cho web của chúng ta tải kịp nội dung.

Tạo hiệu ứng Loading cùng 4 thầy trò đường tăng

Đây là một trang loading với hiệu ứng 4 thầy trò đường tăng, cực kì chất chơi lun nha. Bây giờ chúng ta cùng bắt đầu làm thôi nha....

Web Demo

Bước 1: vào trang quản trị blogger --> chủ đề --> chỉnh sửa html 

Bước 2: tìm cho mình thẻ </body> và dán đoạn code phía dưới vào phía trên thẻ </body> 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.main-load { height:100vh; width:100vw; -webkit-background-size:cover; background-size:cover; overflow:hidden; position:relative; }
.main-load ul { height:100%; width:3920px; position:absolute; top:0; left:0; animation:dong 50s linear infinite; }

@keyframes dong {
    0% { left:0; } 100% { left:1920px; } 
} 
.main-load ul li { height:100%; width:100%; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI13YLozEwN6X81pMQrA2_wdkjk_Ypwhv01xCzlVKGb7jDTNhswvaRkA8ZSLSparWYZ3lmRm3voi4HA3W5d_Uej6MiIyzttSkohNuOtYOAU8BW8YPWZnrpmIHFPo6NSd9M1_NE6FHeW4E/s1600/2.jpg); float:left; margin-left:-2000px; }
.wk { z-index:999; width:200px; height:180px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF9wHKu7H-Dnoj4MSiHxk0N0w3HFHy_nTps1DkGc45BV2ZkRnUMQcmVQket7Nqj4ik-8j6wMIYWXhGh0aYpwGmmo0BbxyYOmDJ0JWd5_mLH2JML9bAJaJWhJHTw6L6edodo93SllzXp7g/s1600/west_01_3ca39fe.png) 0 0 no-repeat; position:absolute; top:55%; left:20%; animation:wkzou 1s steps(8) infinite; }

@keyframes wkzou {
    to { background-position:-1600px 0; } 
} 
.bj { z-index:999; width:200px; height:180px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilxR2lA5yWR6AvHK3hsjeobzo-XR39GvlCEcFNnROBUS4youW4GgNWW0WBzKUZ30lCeWjJEpoT4Q8IebNGDI9_rjBDjWu-Bvht3z7BQPV40vrcCu6Z3JFUnGiGj-V-idHF_QLIvYf6bec/s1600/west_02_47bad19.png) 0 0 no-repeat; position:absolute; top:55%; left:35%; animation:bjzou 1s steps(8) infinite; }

@keyframes bjzou {
    to { background-position:-1600px 0; } 
} 
.ts { z-index:999; width:170px; height:240px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI1SlMQ5bnCIz68zHK0ZfxM9ZJOs8vbz-vTDgGYxYb9r6ywwIGxetGLSj54wJgNbAlClFvEjFzog_ltKPhpUFlA8Eg75ZyAX4_vAxTl5bWJlwRlKdZUeKQptDU3TAsmwtgeGSZfP4nz_Y/s1600/west_03_f962447.png) 0 0 no-repeat; position:absolute; top:50%; left:50%; animation:tszou 1s steps(8) infinite; }

@keyframes tszou {
    to { background-position:-1360px 0; } 
} 
.ss { z-index:999; width:210px; height:200px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHAtJM_KvDWU9a8ml3zYzN0iWZOHeD4OtPSdrWYbm4NsPImeUmZB4G7ifQfa8kHtmOLV5nHjW0y8E4PFbI0Jw36FhITUTk7F5UYsMf5kQrkKuq8t5CaQd6x7oa_toIjmTVTWL9d0lYDl4/s3200/west_04_6516d80.png) 0 0 no-repeat; position:absolute; top:57%; left:62%; animation:sszou 1s steps(8) infinite; }

@keyframes sszou {
    to { background-position:-1680px 0; } 
} 
.loader{top:0; left:0
background:#3fdcc5; z-index:9992; opacity:1; pointer-events:none; position:fixed; display:-webkit-flex; display:-ms-flexbox; display:flex; width:100vw; height:100vh; min-height:100%; -webkit-animation:fade--out 1s 6s forwards; -moz-animation:fade--out 1s 6s forwards; -o-animation:fade--out 1s 6s forwards; -ms-animation:fade--out 1s 6s forwards; animation:fade--out 1s 6s forwards}

@-webkit-keyframes fade--out {
    0% { z-index:3; opacity:1; } 100% { z-index:-1; display:none; opacity:0; } 
}
@keyframes fade--out {
    0% { z-index:3; opacity:1; } 100% { z-index:-1; display:none; opacity:0; } 
}  
</style>
<div class='loader'><div class='wk'/>
<div class='bj'/>
<div class='ts'/>
<div class='ss'/>
<div class='main-load'>
    <ul>
        <li/>
        <li/>
    </ul>
</div></div></b:if>

Oki thế là xong rồi, bây giờ chúng ta chỉ việc lưu lại và ra reload lại trang web của chúng ta sẽ thấy kết quá nhé . 

Nguồn : Kimidev

Được Chia Sẻ Lại Bởi : NguyenThanhQuoc.Site