文字放大缩小的css3

2015-12-24 00:00:00 by 【6yang】, 929 visits, 收藏 | 返回

@-webkit-keyframes bounceIn{
0%{opacity:0;-webkit-transform:scale(.3);-moz-transform: scale(.3);-ms-transform: scale(.3);-o-transform: scale(.3);transform: scale(.3);}
50%{-webkit-transform:scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05);}
70%{opacity:1;-webkit-transform:scale(.9);-moz-transform: scale(.9);-ms-transform: scale(.9);-o-transform: scale(.9);transform: scale(.9);}
100%{-webkit-transform:scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
}
@-moz-keyframes bounceIn{
0%{opacity:0;-webkit-transform:scale(.3);-moz-transform: scale(.3);-ms-transform: scale(.3);-o-transform: scale(.3);transform: scale(.3);}
50%{-webkit-transform:scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05);}
70%{opacity:1;-webkit-transform:scale(.9);-moz-transform: scale(.9);-ms-transform: scale(.9);-o-transform: scale(.9);transform: scale(.9);}
100%{-webkit-transform:scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
}

.show a:hover img{
   display:block;
   -webkit-animation: bounceIn 0.5s .2s ease both;
    -moz-animation: bounceIn 0.5s .2s ease both;
    -ms-animation: bounceIn 0.5s .2s ease both;
    -o-animation: bounceIn 0.5s .2s ease both;
    animation: bounceIn 0.5s .2s ease both;

}

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=1441&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

文字放大缩小的css3

图片原图