Hiệu Ứng Rung Hình Ảnh Sử Dụng Css3

07.09.2014/08:55

Demo: đây
Code này làm rung ảnh khi chạm hoặc rê chuột vào ảnh...
Rung tất cả hình ảnh nhìn rất đẹp mắt
Các bạn chỉ việc chèn css vào wap bạn là sử dụng được...

<?php
@-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}
?>

Nguồn : Phương Bon.

Tag:

Bạn đến từ:

Gọi admin | SMS admin
Facebook:Nhox Attend

Thanks To:XtGem

Liên kết:

Tool tiện ích admin,KhoGame360,Blog thủ thuật,kenh380
,truyen23h
,tai hinh nen naruto,kenhpro - wap hay,vmt - wap hay, Trần Phú Hiền Blog

↑↑lên đầu trang↑↑