Trang Chủ › Blogspot › CSS › Loading › Thủ thuật blogspot

Css Loading Website hiệu ứng thầy trò Tây Du Ký thỉnh kinh

Khôi Ròm - tháng 7 09, 2018 - Blogspot, CSS, Loading, Thủ thuật blogspot
Css Loading Website hiệu ứng thầy trò Tây Du Ký thỉnh kinh
Tối hôm qua, mình thấy bác Bẽo (blog chiase78) có chia sẻ hiệu ứng làm thầy trò Đường Tăng. Và mình đã kết hợp với một chút CSS để tạo ra hiệu ứng loading. Bây giờ mình sẽ chia sẻ cho các bạn luôn. Hiệu ứng này làm hoàn toàn từ css, tính chất của nó là câu giờ cho trang web load xong. Ở css này mình để hiệu ứng là 6 giây, bạn nào muốn khác thì có thể chỉnh lại.

Demo

Cách thực hiện

Tống hết đống code này dưới thẻ mở
<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/AVvXsEiw7Ol9WC3YJnuCJ7gP1KqvtxbfMaD75uSwOTc9G44OxsXMq2C3wxuFXtPBB0IfUPj2WHckGiUrrWMszL98m0w6EgDjG__rkKxla8M5gBjXhWMAspWKzih2W06VLRkBg2hex3i2Xngj3o0/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/AVvXsEjjww472EjDq4HllK7c1wvgvyaDqFh5r-gTRCuYrYG2qg-jZWL7-SxOZK2zkm5pd8Z5Fy8k7YFw10kbFjyr1BSwN7c5DVrJ-xiJ9DH9rvxd1fJLE6vavJ77yFadVjTU3LHB5ccvCYWutv0/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/AVvXsEgbH1EkObju0H0Lv90_Y9lYUmojxTuH_C6BunUaisLD0kjLox6vu_S40QSgEQnvI-_A_mZacmf7yiC4k_9PtNoL-JIqfN9igepo_co2tiNDJRrv__Y6knUAxNeSeiEQS7-tHcnOm8TzUkg/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/AVvXsEibPn2QlDRpiMHkkTdaUSN-XKepT0SAAIPQNDv5z8PtqgxRhDlaoBRBmBXb5re_mao87n2oU8Ykw_Y1uFQ1cAT4AjA8XvTn1mYqO6Hh-TnVd-PM8FenTu-QuOjKfqLsJDKqeHxidD1pi2s/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/AVvXsEjiJZ-dQGaNwG6UNtoWRX0ZL7T-P0NeTUvlqlmerXRrO7CngTbLbDSo11Opub_g2Qbq3eiHOUVnYOcrF3E6VFuUZxPEriqkdsNeTrcotmx1bp_d-Njoax4sornw5VG9Qae6RWty3reU6LI/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>
Lưu template lại. Vậy là ok rồi. Chúc các bạn thành công!