Chuyên mục

  • Download 21
  • Khoá Học 3
  • PSD 9
  • Template Blogspot 10
  • Thủ Thuật Blogspot 9
  • Thủ Thuật Điện Thoại 1
  • Thủ Thuật Facebook 17
  • TIPS 25

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é
Nội dung chính
    Bài đăng mới hơn Bài đăng cũ hơn
    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