Nghỉ lễ tết Kỷ niệm 80 năm Cách Mạng Tháng 8 và Quốc Khánh 2/9 ở nhà buồn buồn ngồi xem phim thì vào trang xem phim thấy cái hiệu ứng load trang khá đẹp để hưởng ứng tinh thần yêu nước và kỷ niệm 80 khá đẹp nên coppy về chia sẻ cho anh em cùng nhau sử dụng trên Blog của mình.
Ngoài việc hưởng ứng tinh thần yêu nước và kỷ niệm 80 năm thì các hiệu ứng chờ tải trang hiện nay rất nhiều trang web sử dụng. Mỗi trang đều sử dụng cho mục đích khác nhau mà một trong những nguyên do cần đưa hiệu ứng này vào là che đi phần khuyết điểm trong thời gian tải trang, bất kể thời gian tải bao lâu nếu thấy trang có hiện tượng bị giựt, bố cục hiển thị không đồng bộ ví dụ phần sau tải trước phần trước...
Hiệu ứng tải trang này sẽ chỉ sử dụng HTML và CSS nên nó gần như sẽ không ảnh hưởng gì đến tốc độ tải trang của blog hay trang web hiện tại nên các không phải băn khoăn. Không vòng vo nữa ngay dưới đây sẽ là phần hướng dẫn cũng như code để thêm vào Blog của bạn.
Bước 1: Thêm code HTML dưới đây vào phía dưới thẻ <body>
<div id='qk-event-load'>
<div class='trongdong-wrap'>
<div class='trongdong'/>
</div>
<div class='quockhanh-wide'>
<div class='object-center'>
<div class='vn-flag'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_YI_ZCqZWrrH1uQWPsV4Kz03-2YUKQ0DThmxRN2GlkIMuvzfbR9dl6uVWVJcymwK7fxNSWwMamR6MtQdqiwS0x-MN1nbpq9UJ4cL3OivBeebm-V-TyzU-JWY7_DzgTLaEFqBNs7VYxaxOsvC7qyw79-4-Np3v8GjYPwFuz4H7uIgBLEldd2sn0Znu_Eij/s600-rw-e30/star-fly.gif'/>
</div>
<div class='vn-hero'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhoRSq_EePDc57_dtwvMMwHHcs3Jb511ozno_LTgN2Ep4KNX6ArjrCgOa-XATdebVuBQ-cE8w-UfETccsC6M3Q9oU7yi5sTxqLm3PaW26U-zcKhZwux-omv8DsAMqBV4OqEiPf1JqbOwNne80BSeHqy0RH7fuC2hiTiIFb_UouGybw1bCpwdH_re1qpI18/s1121-rw-e30/hero.webp'/>
</div>
<div class='vn-text'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJBV4XziYSlkgsM3oahaaF10KxGm7Y6bk3H2mhX9GzFj9DU_9ZvWZ23qEVv4IyG41MxfZ4OAPO5cc4Fxg_3izjBEkfQn8dKOBKZ6vVnMoxQSe1wapzmx-iWqiQuTgCIrB-kjKRYOyEUcPtjcLnNn8TIury-5zEFIqcvdHowq6rczF_41Qy1IthY_D9nYJq/s800-rw-e30/year-text.webp'/>
</div>
</div>
</div>
<div class='text-h1 text-center'>
<div>Kỷ Niệm 80 Năm Cách Mạng Tháng 8 Và Quốc Khánh 2/9 Nước Cộng Hoà Xã Hội Chủ Nghĩa Việt Nam</div>
</div>
</div>
Bước 2: Thêm code CSS dưới đây vào trong cặp thẻ <b:skin>...</b:skin> hoặc <style>...</style>
#qk-event-load{position:fixed;z-index:1000;top:0;right:0;bottom:0;height:100vh;background-color:#191B24;padding:150px 0}
#qk-event-load,#qk-event-load .text-h1{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#qk-event-load .text-h1{font-size:2.5em;line-height:1.6;color:#fff;font-weight:600;margin:0 auto;gap:0;padding:0 1rem;height:200px;max-width:950px}
.qk-logo{background: white; border-radius: 50%;position:fixed;bottom:60px;left:50%;transform:translateX(-50%)}
.qk-logo img{height:50px;width:auto;display:block}
.quockhanh-wide{width:100%;height:400px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA_Iv-VOdikCyO5-MHa0IW1Eyrvf0lDnNxwjhmVJzEV46EOuuOejtHfFhQVTeO9S6nAsAkixt_dip0Z6GiLhH6v_CGj8ykzRuUMcBh9Antxa327hRjKNyr94LNn2SunfBS8UXxsFuv4P-8wipr6Ic1x9ouoM8uptk6ExjKE91YWdlGQ3WFdQx_xga0WMJB/s600-rw-e30/qk_background.webp) repeat;display:flex;align-items:stretch;justify-content:center;position:relative;overflow:hidden}
.quockhanh-wide .object-center{height:100%;width:100%;max-width:1200px;margin:0 auto;z-index:2;display:flex;align-items:center;gap:0;justify-content:center}
.quockhanh-wide .object-center>div.vn-hero,.quockhanh-wide .object-center>div.vn-text{position:relative;z-index:3}
.quockhanh-wide .object-center>div img{height:100%;width:auto}
.quockhanh-wide .object-center>div { height: 100%; position: relative; flex-shrink: 0; display: flex ; align-items: center; justify-content: center; }
.trongdong-wrap{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-mask-image:linear-gradient(0deg,transparent 10%,black 40%,black 60%,transparent 90%);mask-image:linear-gradient(0deg,transparent 10%,black 40%,black 60%,transparent 90%)}
.trongdong-wrap .trongdong{margin-top:-200px;width:100%;padding-bottom:100%;opacity:.5;position:absolute;left:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIqDok1IhJIZlnjsMzsTzVof21Wn_vxiw6Ia557T9LWZ7m9_ob1q4lJyFq_olP6B6m69qfl6BBDRFOZ_DE0O7pqJ3brRXWD4qXLla3uZdpqNdVYBk0nxg55_YlI2Vb45_6n1J0qaiCdcfSrZZs8bPUa9zjo7_M5gyuw5uNR4Tr8NdrnsVSNvHt45BCbVYU/s1200-rw-e30/trongdong.webp);background-size:cover;background-position:50%;animation:trong-dong 100s linear infinite;transition:all .3s ease 0s;transform-origin:center center;-webkit-transition:all .3s ease 0s;-moz-transition:all .3s ease 0s}
@keyframes trong-dong {
0%{transform:rotate(0)}
50%{transform:rotate(180deg)}
to{transform:rotate(1turn)}
}
.vn-flag{opacity:.7}
.qk-base-load #app{animation:app-load-delay 1s linear forwards;animation-delay:4s;opacity:0;height:100vh}
@keyframes app-load-delay {
0%{opacity:0;height:100vh}
to{opacity:1;height:auto}
}
#qk-event-load{animation:event-load 4s linear forwards;opacity:0}
@keyframes event-load {
0%{opacity:0;transform:scale(.9)}
20%{opacity:1;transform:scale(1)}
95%{opacity:1;transform:scale(1);z-index:1000}
to{opacity:0;transform:scale(.9);visibility:hidden}
}
@media screen and (max-width:1440px) {
.quockhanh-wide{height:300px}
}
@media screen and (max-width:1100px) {
.quockhanh-wide{height:200px}
#qk-event-load .text-h1{font-size:1.8em;line-height:1.5;height:120px;max-width:740px}
.trongdong-wrap .trongdong{margin-top:-120px;width:150%;padding-bottom:150%;left:-25%}
}
@media screen and (max-width:720px) {
.quockhanh-wide .object-center>div.vn-flag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);top:50%;width:50%;padding-bottom:50%;height:0;opacity:.3}
.quockhanh-wide .object-center>div.vn-flag img{position:absolute;top:0;left:0;right:0;bottom:0;object-fit:cover}
#qk-event-load .text-h1{font-size:20px;max-width:600px}
}
@media screen and (max-width:479px) {
.quockhanh-wide .object-center{flex-direction:column-reverse}
.quockhanh-wide .object-center>div.vn-flag{opacity:1}
.quockhanh-wide .object-center>div.vn-text{height:140px}
.quockhanh-wide{padding-top:60px;height:300px}
.trongdong-wrap .trongdong{margin-top:-90px}
#qk-event-load .text-h1{font-size:14px;height:90px}
.qk-logo{bottom:40px}
.qk-logo img{height:40px}
}
Bước 3: Bấm lưu và kiểm tra.
Vậy là xong, mình đã hướng dẫn các bạn cách thêm Hiệu ứng tải trang Quốc Khánh 2/9 Việt Nam cho Blogger sử dụng HTML - CSS, demo các bạn có thể tại lại trang bài viết này để xem. Nếu bạn thấy bài viết hay và hữu ích hãy chia sẻ bài viết về trang Facebook cá nhân để lưu lại nhé. Chúc các bạn vui vẻ!
