[教程]月宅教你图片鬼畜起来，文字抖起来-CSS高级教程

好久不写教程与干货，有人说我水

月宅目前正在逐渐完善表情框的功能，目前加入了交互动画，提高了可控制性与可观性。让人知道自己选择的是哪张图片，这里月宅就说一下如何让自己的表情包或图片、文字鬼畜起来！下一篇的技术教程文章是如何添加属于自己的表情包。

预览效果就是下方的表情包，但考虑手机用户木有表情按钮，月宅还是录了一张GIF:

教程

本来月宅是修改了多种超级鬼畜的动画，但考虑但辣眼睛…伤眼睛，就算啦。就这样比较可观=-=

以下@动画必须加入，随便你加到哪，但是要在红字的前面。下面的设置是月宅调整的，你也可以自行修改，改成超级无敌宇宙级别的鬼畜抖动特效。

@-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.2) rotate(3deg);}
40%,60%,80%{-moz-transform:scale(1.2) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}
}

@-webkit-keyframes tada{
0%{-webkit-transform:scale(2);}
10%,20%{-webkit-transform:scale(1) rotate(-3deg);}
30%,50%,70%,90%{-webkit-transform:scale(1.2) rotate(3deg);}
40%,60%,80%{-webkit-transform:scale(1.2) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);}}

.smiliepad img:hover{
-webkit-animation: tada 1s .0s ease both;
-moz-animation: tada 1s .0s ease both;
}

这里.smiliepad红色标识是写上你要调用的CSS标签。
月宅并不会去细说这些参数，毕竟是教你加入特效，而不是教你CSS的知识。