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

demo

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é