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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidoIuOF94j7seJUvSi793F8UfKscv2-GYbF1sGdkZoZogEw_HIZmYexkpG_9GcXoG09QDBHNv6zG81PAbcWQQgWuxT-sXKvy2r3sY3uq4wEm22lWopYQLEeq1EsewyqKF1Y3siW_UPkRk/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/AVvXsEjfWIpobe_qC4awmnQrBAo2khkj7GbuCySuPQzTfBc-QRp3AYun7m6uJKG6yftPIYE6NVhdoiQ7QHDry98SvNNPtGw1PgJC5s-hPzeuv3TymRqGhlwT3K9ZGiw3rrOTZIMMHLoiOdlmizg/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/AVvXsEhhmMDu-7XhTp74rYU6vGpMOorH8HiVjoczgQOUbp3ziM3LGMZwCz2Gmk3P0RoZoH8puqFH6KW3x8PIkZSHYTc2TNeRF_6wzBUrJLjM3YKTWTNkiRTwuj2oFXCltMxXJLRZBiZXdea48pY/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/AVvXsEhXj4hudbgOfiUkaU_cGwdldbBZaf8hM82Ou4QxvdMnRaarX2Vw8dLB7dvLPbsVKNyhYruDt5XzF2uqmIKWM0n3z9bkcdif8wMxUDPuyu-P0rnpvoyjxq7pmxSLgY23GcRl7fWPCxBthMM/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/AVvXsEjG_vskI_cu_NrmJyn7CTJPXe6EJDQedxOumRp6mBLKnP05ioMGxdyLBUq3yYahX8lBCgR4uNRTyUDdfh6myJ7J0nG_CYMMYIS_gPu_V3GY1etGdy9REeTGw8lqyW4ZUs2kXECUWk7eRNY/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