Tạo Hiệu Ứng Loader Hoàn Toàn Bằng CSS Cho Blogspot | Gia Huy NY Blog

Are you sure?

You want to turn off ads.

Chào mọi người, lúc nảy rảnh có lục cái mẫu php của thằng bạn thấy có cái hiệu ứng loader đẹp lắm, mình thấy nó hầu như làm bằng css nên không ảnh hưởng gì đến blog nên đem về share luôn. Nếu ai coder giỏi thì có thể lấy cái này làm hiệu ứng loading trang cho blog nhé.
Cách làm cũng khá đơn giản gồm 3 bước.
Bước 1: Login Blogger
Bước 2: Chèn Css Lên Trên ]]></b:skin>
.loader{top:calc(50% - 32px);left:calc(50% - 32px);width:80px;height:80px;border-radius:50%;perspective:800px;margin:auto;margin-bottom:20px;}

i.fa.fa-star{color:#000;margin-top:15px;margin-left:9px;}

.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%;}

.inner.one{left:0%;top:0%;animation:rotate-one 1s linear infinite;border-bottom:3px solid #EFEFFA;}

.inner.two{right:0%;top:0%;animation:rotate-two 1s linear infinite;border-right:3px solid #EFEFFA;}

.inner.three{right:0%;bottom:0%;animation:rotate-three 1s linear infinite;border-top:3px solid #EFEFFA;}

@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg);}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg);}}

@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg);}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg);}}

@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg);}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg);}}
Bước 3: Chèn Đoạn HTML Hiển Thị Ở Nơi Bạn Muốn.
<div class='loader'> <i aria-hidden='true' class='fa fa-star'></i> <div class='inner one'></div> <div class='inner two'></div> <div class='inner free'></div> </div>

Demo

- Người đăng-CTV: Trần Huy
- Mọi chi tiết xin liên hệ:
• Official-website: s2topvn.blogspot.com
• Email: Huyplayslot@gmail.com
• Facebook: www.Fb.com/Huy.Rockett
Tạo Hiệu Ứng Loader Hoàn Toàn Bằng CSS Cho Blogspot | Gia Huy NY
Tác giả: Gia Huy NY

Tôi là Huy,Say hello to you!

  • 16 nhận xét: