,

TẠO HOVER CỰC ĐẸP CHO PHẦN LOGO

 Xin chào tất cả mọi người đang có mặt trên blog Star Sinh Blog. Mình là Sơn, cộng tác viên mới của blog này, rất mong được các bạn giúp đỡ.


Như tiêu đề, hôm nay mình sẽ chia sẻ cho các bạn cách tạo hover cực đẹp cho phần logo. Bắt đầu nào

BƯỚC 1:
Chèn code sau vào trước thẻ đóng ]]></b:skin>
.header-logo:hover{animation-name:logo;-moz-animation-name:logo;-webkit-animation-name:logo;animation-duration:.8s;-moz-animation-duration:.8s;-webkit-animation-duration:.8s;transform-origin:50% 50%;-moz-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-moz-animation-timing-function:linear;-webkit-animation-timing-function:linear}@keyframes logo{0%{transform:translate(2px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px,0) rotate(1deg)}30%{transform:translate(0,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(2px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(2px,2px) rotate(0)}100%{transform:translate(1px,-2px) rotate(-1deg)}}@-moz-keyframes logo{0%{-moz-transform:translate(2px,1px) rotate(0)}10%{-moz-transform:translate(-1px,-2px) rotate(-1deg)}20%{-moz-transform:translate(-3px,0) rotate(1deg)}30%{-moz-transform:translate(0,2px) rotate(0)}40%{-moz-transform:translate(1px,-1px) rotate(1deg)}50%{-moz-transform:translate(-1px,2px) rotate(-1deg)}60%{-moz-transform:translate(-3px,1px) rotate(0)}70%{-moz-transform:translate(2px,1px) rotate(-1deg)}80%{-moz-transform:translate(-1px,-1px) rotate(1deg)}90%{-moz-transform:translate(2px,2px) rotate(0)}100%{-moz-transform:translate(1px,-2px) rotate(-1deg)}}@-webkit-keyframes logo{0%{-webkit-transform:translate(2px,1px) rotate(0)}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg)}20%{-webkit-transform:translate(-3px,0) rotate(1deg)}30%{-webkit-transform:translate(0,2px) rotate(0)}40%{-webkit-transform:translate(1px,-1px) rotate(1deg)}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg)}60%{-webkit-transform:translate(-3px,1px) rotate(0)}70%{-webkit-transform:translate(2px,1px) rotate(-1deg)}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg)}90%{-webkit-transform:translate(2px,2px) rotate(0)}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg)}}

Thay phần màu .header-logo thành class hoặc id phần logo của blog bạn cho phù hợp nhé.
BƯỚC 2:
Lưu template lại và hưởng thụ thành quả.
KẾT LUẬN:
Vậy là chỉ với vài dòng css các bạn đã có cho mình được 1 thủ thuật hữu ích phải không nào. Chúc các bạn thành công, nhớ ủng hộ Star Sinh Blog nhé
- 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 !
- Mọi chi tiết xin liên hệ:
• Email: transinh085@gmail.com
• Facebook: Fb.com/TNS.CLONE1
Xin chân thành cảm ơn những đóng góp của bạn để chúng tôi ngày càng phát triển hơn nữa...

● Hãy là con người văn minh từ những câu nói

54 nhận xét:

  1. Mình có ghé blog thường xuyên nhưng lười cmt quá nên bác thông cảm hehe :3

    Trả lờiXóa
  2. đây có phải là demo :v https://codepen.io/quocbaoit/pen/KxmGap

    Trả lờiXóa
  3. Đa số chẳng ai quan tâm đến bạn ctv

    Trả lờiXóa
  4. xem lên vào triệu $ chưa kakak

    Trả lờiXóa
  5. lâu rồi không thấy ông qua :V tui chuẩn bị lọc lk đây

    Trả lờiXóa
  6. sao dạo này ít ra bài thế c.bị tui lọc lk đấy

    Trả lờiXóa
  7. hay lắm bạn hiền :)
    PS: giúp tôi 1 liên kết nhé "click vào đầy"

    Trả lờiXóa
  8. Qua blog anh xem bài mới nhé em

    Trả lờiXóa
  9. buổi chìu vui vẻ tương tác tốt

    Trả lờiXóa
  10. để full màn hình nhìn kì quá em....bề ngang dài vô tận :D

    Trả lờiXóa
  11. Trả lời
    1. Click vừa thôi chứ ko bay gà của a í

      Xóa