css3实现文字动画效果 |css中section nav

// CSS3动画效果属性@keyframes move {
0% { transform: translateX(0); } 
100% { transform: translateX(300px); } 
}// 给文字设置动画.text {
animation: move 1s infinite; 
}

以上是文字向右平移的动画效果，其他的文字动画效果也可通过改变CSS3动画效果属性来实现。为了更好的展现动画效果，大家还可以使用CSS3的过渡效果。

// 文字过渡效果的属性.text {
transition: all 0.3s ease-in-out; 
}// 鼠标悬停时文字的过渡效果.text:hover {
transform: scale(1.2) rotate(45deg);
color: #f00;
}

以上是文字放大旋转并改变颜色的过渡效果，通过不断地尝试和修改CSS3属性，大家还可以实现更多有趣的动画效果。