emlog图片鼠标经过抖动效果

作者:Tigh     发布于「插件」 - 猫雅博客

标签:
2017-03-05 分类:插件 阅读(97) 评论(0) 百度已收录
当前位置:猫雅博客 > 网站相关 > emlog > 插件 > 正文
赞(0) 打赏

作者:Tigh

站长QQ1165500646

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

这边有的人和我说不喜欢全站的图片都这样抖动,只希望部分的就可以。

那么我给出一个方案,给需要抖动的img前面加个div  给div加class属性=dimg


/**图片抖动**/
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;}}

分享到:
未经允许不得转载:

作者:Tigh, 转载或复制请以 超链接形式 并注明出处 猫雅博客
原文地址:《emlog图片鼠标经过抖动效果》 发布于2017-03-05

评论 抢沙发

8 + 1 =


emlog图片鼠标经过抖动效果

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

这绝对不是广告!

灌水说明

由于评论过多,垃圾评论日益严重,决定开始封禁不正常评论,我分享资源不欠谁,所以对于抱着敷衍不正常的评论者,很抱歉啦,本站不对你开放。

封禁列表
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册