Hiệu ứng animate khi tải thêm bài viết Blogspot

Như các bạn đã biết, bây giờ đã là năm 2019 và đã qua 20 năm phát triển Blogger, vì vậy mà càng ngày có càng nhiều các blog mọc lên để chia sẽ những thủ thuật khác nhau. Tuy mình mới làm Blog được vài năm nhưng không chia sẽ công khai nhiều vì lúc đó chỉ làm chơi và vui. Vì thế mình cũng hạn chế viết thủ thuật Blogspot đi nhé, nếu bạn nào có nhu cầu thì bình luận xuống dưới để mình làm hướng dẫn cho các bạn.
Hôm nay mình sẽ chia sẽ hiệu ứng animate khi tải thêm bài viết cho blog của bạn nhé, cái này mình nhặt được trên Facebook mà quên nguồn rồi, bác nào nhớ thì comment để mình thêm nhé, cảm ơn các bạn!

1, Code HMTL
Các bạn chèn vào nơi mình muốn nhé.
<div class="fblwti-animated">

  <div class="fblwtia-mask fblwtia-title-line fblwtia-title-mask-0"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sapo-line-0"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-0"></div>

  <div class="fblwtia-mask fblwtia-title-line fblwtia-title-mask-1"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sapo-line-1"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-1"></div>

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-2"></div>

  <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-2"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-2"></div>

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-3"></div>

  <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-3"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-3"></div>

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-4"></div>

  <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-4"></div>

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-4"></div>

</div>

2, CSS
Các bạn thêm vào ]]></b:skin>
.fblwtia-mask {

  background:#fff;

  position:absolute;

  -webkit-box-sizing:border-box;

  -moz-box-sizing:border-box;

  box-sizing:border-box;

  height:10px;

}

.fblwtia-title-line {

  right:0;

  left:36%;

  top:0;

  height:20px;

  width:3%;

}

.fblwtia-front-mask {

  height:10px;

  left:36%;

  width:3%;

}

.fblwtia-title-mask-1 {

  top:30px;

}

.fblwtia-front-mask-2 {

  top:70px;

  height:15px;

}

.fblwtia-front-mask-3 {

  top:105px;

}

.fblwtia-front-mask-4 {

  top:125px;

}

.fblwtia-sepline-sapo {

  left:36%;

  right:0;

}

.fblwtia-sepline-sapo-0 {

  top:20px;

}

.fblwtia-sepline-sapo-1 {

  top:50px;

  height:20px;

}

.fblwtia-sepline-sapo-2 {

  top:85px;

  height:20px;

}

.fblwtia-sepline-sapo-3 {

  top:115px;

}

.fblwtia-sepline-sapo-4 {

  top:135px;

  height:50px;

}

.fblwtia-sapo-line {

  right:0;

}

.fblwtia-sapo-line-2 {

  top:70px;

  left:55%;

  height:15px;

}

.fblwtia-sapo-line-3 {

  top:105px;

  left:95%;

}

.fblwtia-sapo-line-4 {

  top:125px;

  left:85%;

  height:10px;

}

.fblwti-animated {

  animation-duration:1.5s;

  animation-fill-mode:forwards;

  animation-iteration-count:infinite;

  animation-name:placeHolderShimmer;

  animation-timing-function:linear;

  background:#f6f7f8;

  background:linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);

  background-size:800px 200px;

  height:185px;

  position:relative;

}

@-webkit-keyframes placeHolderShimmer {

  0% {

    background-position:-800px 0;

  }

  100% {

    background-position:800px 0;

  }

}

.fblwtia-sapo-line-0 {

  top:0;

  left:98%;

  height:20px;

}

.fblwtia-sapo-line-1 {

  top:30px;

  left:85%;

  height:20px;

}


Chúc các bạn thành công!
Bài đăng mới hơn Bài đăng cũ hơn

Bài viết liên quan