EMLOG实现图片鼠标经过抖动的特效

作为博客一族，相信很多站长都喜欢不断的折腾自己的网站，在学习中实践、在实践中学习，通过给网站添加各种各样的特效彰显自己的个性，优化每一个细节，那么现在就来为大家分享一个EMLOG实现图片鼠标经过抖动的特效。

一、操作步骤

1、打开模板样式文件style.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;}}

2、根据网站的实际情况，修正上述代码里的样式选择器

二、原理解析

给需要添加抖动的img前面加上DIV，让给DIV添加class属性=dimg

三、注意事项

1、本教程中的样式选择器需要根据实际情况进行修改