html点击文字文字放大缩小,文字放大缩小的css3

文字放大缩小的css3

2015-12-24 00:00:00 by 【6yang】, 867 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;

}

分享到：

share