emlog图片鼠标经过抖动效果

请在后台-主题设置-文章页设置-添加左边栏模块

首页 » 网站相关 » emlog » 正文

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

那么我给出一个方案,给需要抖动的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

分享到:
赞(1) 生成海报

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

博客进行重整
由于现实繁忙博客已几个月没管理,最近由于疫情在家所以打算重整博客,在此也希望大家注意身体不要去人多的地方,不要感染了病毒了。
切换注册

登录

忘记密码 ?

切换登录

注册