[分享]css3文字从小变大

在CSS3中，实现文字从小变大的功能非常简单。只需要使用 <transition> 属性和 <transform> 属性即可实现。

/* 定义css样式 */ 
#text {
    transition: all 1s; /* 定义过渡效果为1秒 */
    transform: scale(0.5); /* 初始时文字大小为原来的0.5倍 */
}

#text:hover {
    transform: scale(1); /* 鼠标移入时文字放大到原来的1倍 */
}

首先，在CSS中定义需要实现从小变大效果的文字所在的标签的样式，这里用ID选择器选择 <div> 标签并定义了初始时的文字大小为原来的0.5倍（通过 transform: scale(0.5); 实现）。

其次，使用 <transition> 属性定义过渡效果，这里我们定义为1秒（transition: all 1s;）。

最后，在 <div> 标签的hover状态下，即鼠标移入时，使用 transform: scale(1); 把文字放大到原来的1倍，这时就会自动触发过渡效果。

这样就实现了CSS3文字从小变大的效果。