GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam

AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam

HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ

Trang chủ >> WapMaster

Tìm Kiếm → Thảo Luận

Hiệu ứng Rung chuyển hình ảnh bằng CSS3

RoSino18k

15-09-2015

→demo:

http://coiphimsex.xwap.info

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 đoạn chèn CSS này vào CSS Wap bạn là sử dụng được...

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