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: 1430 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 tạo ảnh xoay liên tục, ảnh xoay khi hover chuột, css cực đẹp

Share code tạo ảnh xoay liên tục, ảnh xoay khi hover chuột, css cực đẹp, css3 hiệu quả cho làm web/wap ...

Font-family trong html và css, định dạng chữ với font

Font-family trong html và trong css có cấu trúc như thế nào, cách sử dụng và lợi ích của việc dùng font là gì ...

Share code đổ bóng cho chữ, thành phần, text-shadow, box-shadow

Share code đổ bóng cho chữ, thành phần, text-shadow, box-shadow, code css3 cực hay cho web/wap ...

Share code html, css phóng to ảnh khi hover chuột cực hay, đẹp

Chỉ cần sử dụng css và html là ta đã có thể tạo ra hiệu ứng phóng to ảnh cực độc cho web/wap....

Share code html, css cơ bản cho làm wap phần 2

Làm wap ai cũng phải biết html và css, với những code html, css cơ bản chắc chắn sẽ giúp bạn rất nhiều....

Hướng dẫn tạo filelist game đơn giản

Hướng dẫn tạo Filelist game xtgem đơn giản hiệu quả trong làm web/wap ...

«1 234 »