Hiệu Ứng Load Trang
Cách Tạo Hiệu Ứng
Bước 1: Đăng Nhập vào Blogger > Tại Chỉnh Sửa HTML Thêm đoạn css sau mà cuối thẻ
</b:skin> hoặc </style>#preloader{position:fixed;z-index:1800;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:#5ea1e5}Bước 2: Thêm Đoạn Code sau dước thẻ
.no-js #preloaders,.oldie #preloaders{display:none}
#loader{position:absolute;top:calc(50% - 1.25em);left:calc(50% - 1.25em)}
.loader{display:inline-block;width:30px;height:30px;position:relative;border:4px solid #Fff;top:50%;animation:loader 2s infinite ease}
.loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#fff;animation:loader-inner 2s infinite ease-in}
@keyframes loader {
0%{transform:rotate(0deg)}
25%{transform:rotate(180deg)}
50%{transform:rotate(180deg)}
75%{transform:rotate(360deg)}
100%{transform:rotate(360deg)}
}
@keyframes loader-inner {
0%{height:0}
25%{height:0}
50%{height:100%}
75%{height:100%}
100%{height:0}
}
<body><div id='preloader'>Bước 3: Thêm Đoạn JS sau trước thẻ
<div id='loader'>
<span class='loader'>
<span class='loader-inner'></span>
</span>
</div>
</div>
</body> là xong<script type='text/javascript'>Bước 4: Hưởng Thụ :D
/*<![CDATA[*/
$(window).bind("load", function () {
jQuery("#loader").fadeOut("slow");
jQuery("#preloader").delay(0).fadeOut();
});
/*]]>*/
</script>
Nếu bạn sao chép bài viết trên blog thì vui lòng để nguồn vào giúp mình. Tôn trọng người khác thì người khác sẽ tôn trọng lại bạn.
Nếu có thắc mắc gì về code, code lỗi,... thì liên hệ mình để được giúp đỡ nhé.
Bình luận
Không có nhận xét nào:
Đăng nhận xét