分享一段图片抖动放大效果CSS3代码

HTML5+CSS3 欲思 6评论

现在好多评论中的头像图片都加了各种鼠标效果。这段css就可以实现图片抖动放大的效果。

之前我的博客上面的列表图片都加了这个效果。现在感觉不台需要了,所以就去掉了这个效果。

不过代码收藏着分享给大家,也许有的朋友会喜欢这个效果的。

分享一段图片抖动放大效果CSS3代码

鼠标移动到图片上面的时候,就会抖动放大一次。光标移出后图片恢复正常。

/*@欲思 图片抖动*/
.sticky img,.focus img,.widget img,.related_posts img:hover{-webkit-animation-fill-mode: both;-moz-animation-fill-mode: both;-ms-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both;
-webkit-animation-duration: 0s;-moz-animation-duration: 0s;-ms-animation-duration: 0s;-o-animation-duration: 0s;animation-duration: 0s;-webkit-animation-duration: 0.7s;-moz-animation-duration: 0.7s;-ms-animation-duration: 0.7s;-o-animation-duration: 0.7s;animation-duration: 0.7s;}
@-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } }
@-moz-keyframes pulse {0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } }
@-o-keyframes pulse { 0% { -o-transform: scale(1); }50% { -o-transform: scale(1.1); }100% { -o-transform: scale(1); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }}
img:hover {-webkit-animation-name: pulse;-moz-animation-name: pulse;-o-animation-name: pulse;animation-name: pulse;}

相关阅读:分享12个简洁漂亮的纯CSS3进度条特效动画代码

转载请注明:欲思博客 » 分享一段图片抖动放大效果CSS3代码

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (4)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 要放哪啊?
    编谈2014-06-28 17:10 回复
  2. 需要的可以收着。
    欲思博客2014-04-29 19:36 回复
  3. 是挺好玩的。
    好运鞋网2014-04-23 14:27 回复
  4. 这个效果,是起到突出的作用?
    优妈妈博客2014-04-23 12:37 回复