[分享]css全屏文字动画切换效果

CSS全屏文字动画切换效果是一种非常炫酷的特效，它能够将页面的文字内容呈现出非常动态的效果，不仅可以提升页面的美观度，也可以增强用户对页面内容的关注度。 .fullscreen { : relativ...

CSS全屏文字动画切换效果是一种非常炫酷的特效，它能够将页面的文字内容呈现出非常动态的效果，不仅可以提升页面的美观度，也可以增强用户对页面内容的关注度。

 .fullscreen {
        position: relative;
        height: 100vh;
    }
    .fullscreen .text-wrap {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        white-space: nowrap;
        overflow: hidden;
    }
    .fullscreen .text-wrap span {
        display: inline-block;
        padding-left: 100%;
        animation: move 10s linear infinite;
    }
    @keyframes move {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-100%);
        }
    } 

首先，我们需要在 HTML 中创建一个全屏容器，并给容器设置一个 position:relative 的属性，同时设置其高度为100vh。然后，在容器内创建一个文本容器，使用 position:absolute 来使其相对于全屏容器居中对齐。

在文本容器中，我们需要使用 white-space:nowrap 和 overflow:hidden 来使文本内容不会自动换行并隐藏溢出的文本。

接下来，我们需要在每个文本节点上添加一个 span 标签来包裹其内容，并使用 padding-left:100% 来使其与整个文本容器等宽。最后，我们使用 animation 属性来为每个文本节点添加动画效果，然后编写一个 @keyframes 规则来指定节点的动画运动轨迹。