@-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 Hiệu Ứng rung rung khi rê chuột vào ảnh
Các bạn chỉ việc chèn css vào là sử dụng được.
Bài viết này thuộc về Chia Sẻ 78, sao chép xin vui lòng cho biết nguồn: https://htmleaf78.blogspot.com/2015/12/share-code-hieu-ung-rung-rung-khi-re.html
Không có nhận xét nào