Hiệu Ứng Loading Cho Blogspot
Hello các bạn, chào mừng các bạn đã quay trở lại với bài viết tiếp theo của mình. Thủ thuật liên quan đến blog thì là vô hạn nên có share bao nhiêu cũng chẳng hết nên hôm nay mình sẽ lại share cho các bạn một thủ thuật nữa.
|
| Share Code Hiệu Ứng Loading Cho Blogspot |
Như các bạn đã nhìn tiêu đề cũng như là thumbnail hay khi các bạn ấn vào bài viết này, các bạn cũng có thể nhận ra bài này nói về cái gì rồi. Đúng vậy hôm nay mình sẽ chia sẻ cho các bạn code để tạo một hiệu ứng load trang như ở đầu bài viết nhé!
Demo Và Hướng Dẫn
Demo:
Mình cùng xem lại hiệu ứng một lần nữa nhé!
Hướng Dẫn:
Bước 1:
Coppy toàn bộ đoạn code dưới đây:
<style>
.cat{position:fixed;width:100%;max-width:20em;overflow:hidden;background-color:#e6dcdc}.cat::before{content:"";display:block;padding-bottom:100%}.cat:hover > *{-webkit-animation-play-state:paused;animation-play-state:paused}.cat:active > *{-webkit-animation-play-state:running;animation-play-state:running}.cat__body,.cat__tail,.cat__head{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-animation:rotating 2.79s cubic-bezier(0.65,0.54,0.12,0.93) infinite;animation:rotating 2.79s cubic-bezier(0.65,0.54,0.12,0.93) infinite}.cat__body::before,.cat__tail::before,.cat__head::before{content:"";position:absolute;width:50%;height:50%;background-size:200%;background-repeat:no-repeat;background-image:url("https://imgur.com/X17ir1t.png")}.cat__head::before{top:0;right:0;background-position:100% 0%;transform-origin:0% 100%;transform:rotate(90deg)}.cat__tail{-webkit-animation-delay:0.2s;animation-delay:0.2s}.cat__tail::before{left:0;bottom:0;background-position:0% 100%;transform-origin:100% 0%;transform:rotate(-30deg)}.cat__body{-webkit-animation-delay:0.1s;animation-delay:0.1s}.cat__body:nth-of-type(2){-webkit-animation-delay:0.2s;animation-delay:0.2s}.cat__body::before{right:0;bottom:0;background-position:100% 100%;transform-origin:0% 0%}@-webkit-keyframes rotating{from{transform:rotate(720deg)}to{transform:none}}@keyframes rotating{from{transform:rotate(720deg)}to{transform:none}}.box{display:flex;flex:1;flex-direction:column;justify-content:flex-start;justify-content:center;align-items:center;position:fixed;background-color:#e6dcdc;z-index:1000;top:0;left:0;width:100%;height:100vh}
</style>
<div class='box'>
<div class='cat'>
<div class='cat__body'></div>
<div class='cat__body'></div>
<div class='cat__tail'></div>
<div class='cat__head'></div>
</div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".box").fadeOut("slow");
}, 1000)
});
</script>
Bước 2:
Dán toàn đoạn code bên trên vào trong phần body của template hoặc dán vào trang bất kì mà các bạn muốn ví dụ như bài đăng hay trang. Sau đó lưu lại!
Lời Kết
Vậy là mình đã chia sẻ cho các bạn cách để tạo hiệu ứng loading cho blogspot. Nếu có bất kì vấn đề nào về bản quyền hay cảm thấy thích bài viết này hãy để lại một comment ở bên dưới nhé. Chúc các bạn một tuần mới vui vẻ và cùng chung tay đẩy lùi dịch Covid nhé!
Copyright © Phạm Văn Linh