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: 1346 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 cơ bản cho làm wap

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 làm một trang điều hướng báo lỗi 404

Đối với mỗi trang wap một trong những thứ cơ bản và không thể thiếu là trang 404. Vậy làm sao để tạo được một trang 404 ?...

Bảng mã màu HEX đầy đủ cho html, css

Bảng mã màu đầy đủ cho làm web/wap rất hữu dụng là thứ không thể thiếu với các wapmaster ...

«1 2 34