css文字隐藏自动滑动显示

基础概念

CSS文字隐藏自动滑动显示是一种网页设计效果，通过CSS控制文本的显示和隐藏，并实现平滑的滑动动画效果。这种效果常用于网站的标题、标语或导航菜单等元素，以吸引用户的注意力并增强用户体验。

类型

水平滑动：文字从左到右或从右到左滑动显示。
垂直滑动：文字从上到下或从下到上滑动显示。
循环滑动：文字滑动显示后自动回到起点，循环往复。

应用场景

网站标题：用于网站的标题或标语，增加视觉冲击力。
导航菜单：用于导航菜单的文字显示，提升用户体验。
广告标语：用于广告或促销信息的展示，吸引用户注意。

示例代码

以下是一个简单的CSS文字水平滑动显示的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字滑动显示</title>
    <style>
        .sliding-text {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 50px;
            background-color: #f0f0f0;
            line-height: 50px;
            text-align: center;
        }
        .sliding-text span {
            display: inline-block;
            white-space: nowrap;
            animation: slide 15s linear infinite;
        }
        @keyframes slide {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <div class="sliding-text">
        <span>这是一个水平滑动显示的文字示例</span>
    </div>
</body>
</html>