您的位置:首页 > Web前端 > CSS

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

2014-04-23 00:00 555 查看
现在好多评论中的头像图片都加了各种鼠标效果。这段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;}
相关阅读:分享12个简洁漂亮的纯CSS3进度条特效动画代码
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: