html滚动文字代码

作者：龙之灬殇发布日期:2025-12-23 浏览:111

<!DOCTYPE html>
<html>
<head>
    <title>滚动文字示例</title>
    <style>
        /* 定义滚动动画 */
        @keyframes scrollText {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        /* 设置文字容器样式 */
        .scroll-container {
            white-space: nowrap; /* 防止文字换行 */
            overflow: hidden; /* 隐藏溢出的内容 */
            border: 1px solid #ccc; /* 添加边框以便更明显 */
            padding: 10px;
            width: 300px; /* 设置容器宽度 */
        }

        /* 设置滚动文字样式 */
        .scroll-text {
            display: inline-block;
            animation: scrollText 10s linear infinite; /* 应用滚动动画，持续10秒，线性运动，无限循环 */
        }
    </style>
</head>
<body>

<div class="scroll-container">
    <div class="scroll-text">
        这里是滚动的文字内容，可以替换为你想要展示的任何文本。这里是一段较长的文字，用于演示滚动效果。
    </div>
</div>

</body>
</html>

解释说明：

HTML结构:
- div.scroll-container：这是包含滚动文字的容器，设置了宽度、边框和隐藏溢出内容的样式。
- div.scroll-text：这是实际滚动的文字内容。
CSS样式:
- @keyframes scrollText：定义了一个从右到左的滚动动画，动画从100%宽度的位置开始，结束时移动到-100%宽度的位置。
- .scroll-container：设置了容器的基本样式，防止文字换行并隐藏溢出部分。
- .scroll-text：应用了滚动动画，动画持续时间为10秒，线性运动且无限循环。

你可以根据需要调整动画的速度（如将10s改为其他值）或修改文字内容。

上一篇：html中div的用法

下一篇：markdown 转 html