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

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

预览效果就是下方的表情包，但考虑手机用户木有表情按钮，月宅还是录了一张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的知识。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。