html怎么让文字动态缩放,css3如何实现缩放动画

css3如何实现缩放动画

css3实现缩放动画，首先我们来学习下css3中的transform:scale属性，它可以控制元素的缩放。

一、transform:scale

1、scale(x,y) 对元素进行缩放

(相关课程推荐：css视频教程)

X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。transform:scale(2,2.5);

2、scaleX() 元素只在X轴(水平方向)缩放元素。

默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点transform:scaleX(2);

3、scaleY() 元素只在Y轴(垂直方向)缩放元素。

基点一样在元素的中心位置。可以通过transform-origin来改变基点。transform:scaleY(2);

最后我们看看兼容性写法：.test{

-moz-transform:scale(2,2);

-webkit-transform:scale(2,2);

-o-transform:scale(2,2);

background:url(img/i.png) no-repeat;

width:198px;

height:133px;

}

二、缩放案例

0%{

transform: scale(1); /*开始为原始大小*/

}

25%{

transform: scale(1.1); /*放大1.1倍*/

}

50%{

transform: scale(1);

}

75%{

transform: scale(1.1);

}

}

.ballon{

width: 150px;

height: 200px;

background: url("images/balloon.png");

background-size: 150px 200px;

-webkit-animation-name: scaleDraw; /*关键帧名称*/

-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/

-webkit-animation-iteration-count: infinite; /*动画播放的次数*/

-webkit-animation-duration: 5s; /*动画所花费的时间*/

}

效果：

本文来自css答疑栏目，欢迎学习！