【网页代码】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条评论南阳 Lv.2 LBrowser 8.0.0.4153 Windows 回复
绝绝子,感谢分享
内蒙古包头市 电信
南阳 Lv.2 LBrowser 8.0.0.4153 Windows 回复
绝绝子
内蒙古包头市 电信
1723458071 Lv.2 Chrome 70.0.3538.25 Windows 回复
大连发布
海南省海口市 联通
mz神里仙气 Lv.1 Chrome 69.0.3497.100 Windows 7 回复
感谢分享
湖南省长沙市 电信
还记得她 Lv.3 Chrome 78.0.3904.97 Windows 回复
感谢分享
中国 移动