0°

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

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
站点出售中https://ikmoe.com/announcement/20357.html
11 条回复 A 作者 M 管理员
  1. 感觉看着有点不舒服2333

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

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

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

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

  5. 停停停

  6. 抖的有点受不了哇

  7. 真是刺激

  8. 效果在这里点表情

欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论