鼠标放上去图片抖动css代码
利用css来实现图片抖动。。
只需要将以下代码复制粘贴到你网站的主要css里面即可实现全站图片抖动。。
下面是css代码。。
/**图片抖动**/ img:hover{-webkit-animation: tada 1s .2s ease both;-moz-animation: tada 1s .2s ease both;} @-webkit-keyframes tada{0%{-webkit-transform:scale(1);} 10%, 20%{-webkit-transform:scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(3deg);} 40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(-3deg);} 100%{-webkit-transform:scale(1) rotate(0);}} @-moz-keyframes tada{0%{-moz-transform:scale(1);} 10%, 20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90%{-moz-transform:scale(1.1) rotate(3deg);} 40%, 60%, 80%{-moz-transform:scale(1.1) rotate(-3deg);} 100%{-moz-transform:scale(1) rotate(0);}} @-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg); opacity:0;} 40%{-webkit-transform:perspective(400px) rotateY(-10deg);} 70%{-webkit-transform:perspective(400px) rotateY(10deg);} 100%{-webkit-transform:perspective(400px) rotateY(0deg); opacity:1;}} @-moz-keyframes flipInY{0%{-moz-transform:perspective(400px) rotateY(90deg); opacity:0;} 40%{-moz-transform:perspective(400px) rotateY(-10deg);} 70%{-moz-transform:perspective(400px) rotateY(10deg);} 100%{-moz-transform:perspective(400px) rotateY(0deg); opacity:1;}}