Gia Huy NY BLOG

Blog chia sẻ ảnh chất lượng cao - thủ thuật hay - ảnh bìa chất

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

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

Lê Võ Gia Huy Designer

Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Các bạn hãy đóng góp ý kiến của mình vào đây giúp tôi nhé !
Mọi chi tiết xin liên hệ:
Email : giahuylevo412@gmail.com
Facebook: https://www.facebook.com/giahuynyblog/
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • 16 nhận xét: