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

Hí xin chào mọi người nha, 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.

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

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/AVvXsEixwh6nZKN0lnelivAoDCeNY4_O7_9w_KP1CT_kA8cF1hgns9N-3CpyJJ91b_sMAg2cEnZtn8LxHj6FU3kwPXNY-mgYXDVwVFbZ1V29wgOuHoMUAjmgvcAUnENzVGyzf0OosmoEtuGfTPg/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/AVvXsEjqeNmH0umV3SDBfxncf1deNgYAkSIY3A_6AXzKSLR9WuSplOaN_9E2G60ym93g7-5lKy6paJ8mkapVcK-DXiek5pVDgqFet39eVxAFQfGj_qYCBeAr9HAyS2VeHJZNLOiZsIE1NZl_J2Q/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/AVvXsEgL3NdHJkt9KWqiEAAAdpUDeKzlv3ALVyveoSjwv9t9fRWmodr1PVRKiXszgP-ly7N6eZlasxcL0ozFdOzuRoGzazY_qtpfgqs7pBa3EOoLi3s56O_L3wugtCvPOaYNVg7_hpQx7JqKDGw/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/AVvXsEh2sgEjwsQPVI_x59oZIQBtydo1648YV-nyN8wz0GzPE1pG3c5nCVJuOA2y-rlaNhapCdbn9QY4g7fc_fH01ZzgvU0VQmtrSCUP_GNIxuEgD_PdOqfLOpYRtl8fD1Bg3kCYlKZ7Jjk13b8/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/AVvXsEh5gfxqNZtPRchjE38oK2N7Ce0hb4htsBaGn2_WVPimXXMWNF6L4qiY4sUq0TIDdIzJXlWWIseycJcCArF2R95yPceEahjkoPItNbXL5vpZqbjfARrTtg_flNI1i-h3CmZ1cz-u8aYi7no/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>

okii thế là xong ò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é .

Thì mình vừa chia sẽ cho các bạn một đoạn code nho nhỏ, vui nhộm làm tăng tính thú vị và hấp dẫn cho website của chúng ta, nếu như có thắc mắc hay không làm được thì anh em comment cho mình mình biết nha mình sẽ giải đáp ho mọi người nhé. Chúc anh em thành công.

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

Post a Comment