[教程]月宅教你图片鬼畜起来,文字抖起来-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的知识。

给TA买糖
共{{data.count}}人
人已赞赏
网络干货

{干货}最新国内免费CDN集锦整理-当下热门

2017-5-26 2:54:34

网络干货

[教程]防止别人冒充最皮的月宅-防止别人冒充博主回复

2017-6-2 3:11:09

11 条回复 A文章作者 M管理员
  1. 感觉看着有点不舒服2333

  2. 签到成功!签到时间:19:32:13 GMT+0800 (中国标准时间)每日打卡,生活更精彩哦~

  3. 鬼畜但是太浪了,如果能设定抖动的时间会更好

  4. 手机版如何评论表情包。。。。。

    • 暂时没有填坑 。以后有空再加一个按钮

  5. 停停停

  6. 抖的有点受不了哇

  7. :尴尬: 真是刺激

  8. :捂鼻血:

  9. :无法描述: :捂鼻血: :黄色滑稽脸: :舔冰棍: :捂鼻血: :捂鼻血:

  10. 月宅

    效果在这里点表情 :舔冰棍: