css3文本动画 |css限制一行只有20个字

.title {
font-size: 48px;
text-align: center;
animation: zoomInAnim 1s ease-in-out;
}
@keyframes zoomInAnim {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}

在上述例子中，大家定义了一个标题（class为“title”），并使用CSS3动画让它从无到有地出现在页面上。大家使用了关键帧（@keyframes）动画，定义了从0%到100%的过渡效果，通过缩放（transform:scale()）和不透明度（opacity）的改变，实现了从缩小和透明度为0到正常大小和透明度为1的过渡。最后，大家将动画应用到标题上，并设置动画持续时间为1秒，缓动效果为ease-in-out。

.text-rotate {
display: inline-block;
animation: rotateText 3s linear infinite;
}
@keyframes rotateText {
100% {
transform: rotate(360deg);
}
}

另一个常见的CSS3文本动画效果是文字旋转。在上述例子中，大家定义了一个文本（class为“text-rotate”），并使用CSS3动画让它以线性速度无限旋转360度。大家同样使用了关键帧（@keyframes）动画，定义了从0%到100%的过渡效果，通过 transform:rotate() 改变文本的旋转度数，实现了一个360度无限旋转的效果。最后，大家将动画应用到文本中，并设置动画持续时间为3秒，缓动效果为线性。

总之，CSS3文本动画为网站带来了更多的设计和创意空间，可以加强网站的视觉效果，吸引更多的用户并提高用户体验。只需要一些基本的CSS知识，就可以轻松实现各种文本动画效果。