Share code css làm ảnh rung động khi hover -- thantienvxp

» Thể loại: Share code xtgem
» Last Updated: 08/05/16
» Lượt xem: 1341 Views

Nội dung:

Share code css ảnh rung động khi hover

Code css ảnh rung động khi hover chuột qua.Chỉ bằng việc sử dụng css3 với các thuộc tính 3D Transforms và Transitions là chúng ta có thể tạo được một mã css cực hay

Lưu ý:Code không hỗ trợ trên các điện thoại bàn phím và một số smartphone đời thấp

Css viết:

@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
  img{-webkit-filter:grayscale(0);display:inline-block;-webkit-transition:all .7s ease-in-out;-moz-transition:all .7s ease-in-out;-o-transition:all .7s ease-in-out;-ms-transition:all .7s ease-in-out;transition:all .7s ease-in-out;}img:hover{-webkit-filter:grayscale(0);}img:hover,img:focus{-webkit-animation-name:spaceboots;-webkit-animation-duration:.8s;-webkit-transform-origin:50% 50%;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;}

[Share] code html css navigation đẹp cho wap/web code cơ bản cho wapmaster

Những mẫu navigation cơ bản nhưng hữu dụng cho làm web. code hay cho làm web/wap ...

Share code filelist ảnh chuẩn slideshow cực đẹp

Code filelist xtgem kết hợp slideshow javascript cự đẹp cho wap ảnh ...

Share code javascript slide cho web/wap hay đẹp

Code javascript + css + html cực hay, code slideshow đẹp cho web/wap ...

Share code background tuyết rơi bằng css và javascript cực đẹp cho wap

Share code background tuyết rơi bằng css và javascript cực đẹp cho wap, code js cực hay đẹp ...

Công cụ tạo logo đẹp online, các trang tạo logo trực tuyến miễn phí

Công cụ tạo logo đẹp online, các trang tạo logo trực tuyến miễn phí ...

Share code javascript và css hiệu ứng cho chuột

Bộ code hịu ứng cực đẹp cho chuột, hiệu ứng hay bằng javascript và css ...

«123 4 »