css全屏文字动画切换 |css官网下载

下面大家就来看看如何使用CSS来实现全屏文字动画切换。

html,body{
height:100%;
}
#container{
position:relative;
height:100%;
overflow:hidden;
}
#container .panel{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:1;
}
#container .panel.active{
z-index:2;
}
#container .panel.cover{
animation: cover .5s forwards;
}
#container .panel.new{
animation: uncover .5s forwards;
z-index:3;
}
@keyframes cover { 
0% {
transform:rotate(0deg) scaleX(0);
}
100% {
transform:rotate(0deg) scaleX(1);
}
}
@keyframes uncover {
0% {
transform:rotate(0deg) scaleX(1);
}
100% {
transform:rotate(0deg) scaleX(0);
}
}

首先，大家需要一个容器，它的高度设为100%，这样它就能占据整个屏幕的空间。

然后大家将容器中的每一个页面都设置为绝对定位，并把它们的高度和宽度都设为100%。同时，大家给容器设置一个overflow属性，这样大家就可以在页面切换过程中隐藏其他页面。

接下来，大家设定一个.active类，用于控制当前页面的层级。大家同时也会用.cover和.new类来控制页面的显示状态。

在CSS的最后，大家定义了两个动画，分别是.cover和.uncover。.cover动画用于隐藏旧页面，.uncover动画用于显示新页面。在动画中，大家采用了transform属性，用于制定每一个页面在动画中的状态。

通过这样的CSS代码，大家就能够实现一种非常炫酷的全屏文字动画切换效果。