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ộ Nguyễn Gia 1988 Blog nhé

Tags