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

 

Thực chất hiệu ứng này là để câu giờ cho Web chạy, các bạn có thể xem Demo

 Demo hiệu ứng Loading với 4 thầy trò đường tăng

Bước thực hiện như sau: chép toàn bộ đoạn Code bên dưới vào trước thẻ đóng  </body> và lưu lại 

<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://3.bp.blogspot.com/-BnxY-vUVNh0/W0IUOKmRfNI/AAAAAAAAB5U/StJqZg2Sf0QHF4YYVmgQIVGljFngVVyZQCLcBGAs/s1600/2.jpg); float:left; margin-left:-2000px; }
.wk { z-index:999; width:200px; height:180px; background:url(https://4.bp.blogspot.com/-MA3-MbowsV0/W0IUOZGnNtI/AAAAAAAAB5c/jPDCp9En5acgz6RxrN7IKV_SwZTt0RcwACLcBGAs/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://4.bp.blogspot.com/-qE0WLZXGiT0/W0IUOVmt8kI/AAAAAAAAB5Y/xSKEKhf3DFsN5ULaF6-m3r9_ibT_O9k9ACLcBGAs/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://4.bp.blogspot.com/-8Mpf1w1hOYA/W0IUOlkT6PI/AAAAAAAAB5g/NoczSASgOBIbIR__w38a2Ch_TfDsAmHMwCLcBGAs/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://2.bp.blogspot.com/-MXtptJ7dpJU/W0IVNbSy5yI/AAAAAAAAB50/RCIJE1ubQkYzmGiBCaxJu_0bcgirXz3fwCLcBGAs/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>

Chúc các bạn thành công!

Nguồn: tipsblogger247