css3 文字过场 |css点击导航菜单切换页面

下面是一些常见的CSS3文字过场效果：

/*1. 淡出效果*/
.fade-out{
opacity:0;
transition: opacity 1s ease-in-out;
}
/*2. 滑动效果*/
.slide-in{
transform: translateX(-100%);
transition: transform 1s ease-in-out;
}
.slide-in.active{
transform: translateX(0%);
}
/*3. 旋转效果*/
.rotate-in{
transform: rotate(360deg);
transition: transform 1s ease-in-out;
}
/*4. 打字机效果*/
.typewriter{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
letter-spacing: .15em;
animation: typing 3s steps(30, end);
}
@keyframes typing{
from{ width: 0 }
to{ width: 100% }
}

以上代码展示了四种不同的文字过场效果。淡出效果通过改变透明度实现，滑动效果通过改变translateX属性实现，旋转效果通过改变rotate属性实现，打字机效果通过使用CSS3动画实现。

CSS3文字过场效果可以使页面看起来更加现代和吸引人。但是，过多过于复杂的效果可能会影响网站的加载速度和性能。因此，使用CSS3文字过场效果时应该注意不要过度使用，只需要在页面需要重点突出的部分使用即可。