Hướng dẫn thực hiện
Truy cập trang blogger.com > Mẫu > Chỉnh sửa HTML tìm đến thẻ
<body> rồi dán đoạn code dưới đây phía dưới thẻ đó.<style>.loadd{position:fixed;background:#6944ff;z-index:1000;top:0;left:0;width:100%;height:100vh} .body{position:absolute;top:50%;margin-left:-50px;left:50%;animation:speeder .4s linear infinite} .body > span{height:5px;width:35px;background:#fff;position:absolute;top:-19px;left:60px;border-radius:2px10px 1px 0} .basespan{position:absolute;width:0;height:0;border-top:6px solid transparent;border-right:100px solid #fff;border-bottom:6pxsolid transparent} .basespan:before{content:"";height:22px;width:22px;border-radius:50%;background:#fff;position:absolute;right:-110px;top:-16px} .basespan:after{content:"";position:absolute;width:0;height:0;border-top:0 solid transparent;border-right:55px solid #fff;border-bottom:16pxsolid transparent;top:-16px;right:-98px} .face{position:absolute;height:12px;width:20px;background:#fff;border-radius:20px 20px 00;transform:rotate(-40deg);right:-125px;top:-15px} .face:after{content:"";height:12px;width:12px;background:#fff;right:4px;top:7px;position:absolute;transform:rotate(40deg);transform-origin:50%50%;border-radius:0 0 02px} .body > span > span:nth-child(1),.body > span > span:nth-child(2),.body > span > span:nth-child(3),.body > span > span:nth-child(4){width:30px;height:1px;background:#fff;position:absolute;animation:fazer1 .2s linear infinite} .body > span > span:nth-child(2){top:3px;animation:fazer2 .4s linear infinite} .body > span > span:nth-child(3){top:1px;animation:fazer3 .4s linear infinite;animation-delay:-1s} .body > span > span:nth-child(4){top:4px;animation:fazer4 1s linear infinite;animation-delay:-1s} @@keyframes fazer1 { 0%{0%{left:0} 100%{100%{left:-80px;opacity:0} } @
} @
keyframes fazer2 { 0%{
0%{left:0} 100%{
100%{left:-100px;opacity:0} } @
} @
keyframes fazer3 { 0%{
0%{left:0} 100%{
100%{left:-50px;opacity:0} } @
} @
keyframes fazer4 { 0%{
0%{left:0} 100%{
100%{left:-150px;opacity:0} } @
} @
keyframes speeder { 0%{
0%{transform:translate(2px,1px) rotate(0deg)} 10%{
10%{transform:translate(-1px,-3px) rotate(-1deg)} 20%{
20%{transform:translate(-2px,0px) rotate(1deg)} 30%{
30%{transform:translate(1px,2px) rotate(0deg)} 40%{
40%{transform:translate(1px,-1px) rotate(1deg)} 50%{
50%{transform:translate(-1px,3px) rotate(-1deg)} 60%{
60%{transform:translate(-1px,1px) rotate(0deg)} 70%{
70%{transform:translate(3px,1px) rotate(-1deg)} 80%{
80%{transform:translate(-2px,-1px) rotate(1deg)} 90%{
90%{transform:translate(2px,1px) rotate(0deg)} 100%{
100%{transform:translate(1px,-2px) rotate(-1deg)} } .longfazers
.longfazers{position:absolute;width:100%;height:100%} .longfazersspan{position:absolute;height:2px;width:20%;background:#fff} .longfazers span:nth-child(1){top:20%;animation:lf .6slinear infinite;animation-delay:-5s} .longfazers span:nth-child(2){top:40%;animation:lf2 .8s linear infinite;animation-delay:-1s} .longfazers span:nth-child(3){top:60%;animation:lf3 .6s linear infinite} .longfazers span:nth-child(4){top:80%;animation:lf4 .5s linear infinite;animation-delay:-3s} @
@keyframes lf { 0%{
0%{left:200%} 100%{
100%{left:-200%;opacity:0} } @
} @
keyframes lf2 { 0%{
0%{left:200%} 100%{
100%{left:-200%;opacity:0} } @
} @
keyframes lf3 { 0%{
0%{left:200%} 100%{
100%{left:-100%;opacity:0} } @
} @
keyframes lf4 { 0%{
0%{left:200%} 100%{
100%{left:-100%;opacity:0} } </
</style>
<div class='loadd'>
<div class='body'>
<span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<div class='base'>
<span></span>
<div class='face'></div>
</div>
</div>
<div class='longfazers'>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>//<![CDATA[ $(window).on('load', function(){ $('.loadd').fadeOut(1000); }) //]]>
$(window).on('load', function(){ $(
$('.loadd').fadeOut(1000); }) //]]>
//]]></script>
Các bạn có thể sử dụng thẻ điều kiện cho nó để chỉ hiển thị tại một trang nhất định. Nếu các bạn muốn như mình chỉ hiển thị tại trang chủ thì các bạn dùng thẻ điều kiện sau:
<b:ifcond='data:view.isHomepage'> <!--Đoạn code ở trên--></b:if>
Subscribe Our Newsletter
Đẹp vkl
Trả lờiXóa