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!
