Đặt quảng cáo

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é
Share:

54 comments:

  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

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

    ReplyDelete
  3. Đa số chẳng ai quan tâm đến bạn ctv

    ReplyDelete
  4. xem lên vào triệu $ chưa kakak

    ReplyDelete
  5. lâu rồi không thấy ông qua :V tui chuẩn bị lọc lk đây

    ReplyDelete
  6. sao dạo này ít ra bài thế c.bị tui lọc lk đấy

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

    ReplyDelete
  8. Qua blog anh xem bài mới nhé em

    ReplyDelete
  9. buổi chìu vui vẻ tương tác tốt

    ReplyDelete
  10. để full màn hình nhìn kì quá em....bề ngang dài vô tận :D

    ReplyDelete