【网页代码】CSS技巧!鼠标经过图片抖动效果

  • 内容
  • 相关
把代码加到style.css(模板的主css里面):
/**图片抖动**/
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;}}

这边有的人和我说不喜欢全站的图片都这样抖动,只希望部分的就可以。 那么我给出一个方案,给需要抖动的img前面加个div  给div加class属性=dimg  然后css代码如下:

该内容已被管理员隐藏 您需要回复后并刷新才可以查看
  

如果你觉得雨滴资源网对你有帮助的话,可以小小的打赏一下小站,用于维持本站的运营!

本文标签:

版权声明:雨滴资源网内容来源于互联网,如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!

本文链接:【网页代码】CSS技巧!鼠标经过图片抖动效果 - https://www.yudzy.com/407.html

失效提示:此文更新于2019-6-14,如果文章内容或图片资源失效,请留言反馈,客服会及时处理,谢谢!

发表评论

评论

5条评论
  1. avatar

    南阳 Lv.2 LBrowser 8.0.0.4153 LBrowser 8.0.0.4153 Windows Windows 回复

    绝绝子,感谢分享

    内蒙古包头市 电信

    1. avatar

      南阳 Lv.2 LBrowser 8.0.0.4153 LBrowser 8.0.0.4153 Windows Windows 回复

      绝绝子

      内蒙古包头市 电信

      1. avatar

        1723458071 Lv.2 Chrome 70.0.3538.25 Chrome 70.0.3538.25 Windows Windows 回复

        大连发布

        海南省海口市 联通

        1. avatar

          mz神里仙气 Lv.1 Chrome 69.0.3497.100 Chrome 69.0.3497.100 Windows 7 Windows 7 回复

          感谢分享

          湖南省长沙市 电信

          1. avatar

            还记得她 Lv.3 Chrome 78.0.3904.97 Chrome 78.0.3904.97 Windows Windows 回复

            感谢分享

            中国 移动