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

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

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

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

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

/*@欲思 图片抖动*/

.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;}