时间戳

首页 > 解决方案 > 如何使溢出文本从左到右动画？

javascript - 如何使溢出文本从左到右动画？

问题描述

这个概念很简单，当文本对容器来说太长时，它会从左到右无限动画（滚动），并在到达结尾后重复这个过程。

我该怎么做这个？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <div class="auto-scroll">
            <p>
                This text should scroll. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi commodi magni quo officia error ab veniam aspernatur. Quos ducimus, hic, maxime dicta optio quidem
                nostrum sint commodi velit, ut distinctio. And return to beginning.
            </p>
        </div>

        <style>
            .auto-scroll {
                background: black;
                padding: 18px;
            }
            .auto-scroll p {
                font-family: monospace;
                font-size: 18px;
                color: white;
                margin: 0;
                white-space: nowrap;
                overflow: auto;
            }

            .auto-scroll ::-webkit-scrollbar {
                height: 10px; /* will be 0px */
            }
            .auto-scroll ::-webkit-scrollbar-track {
                background: #000;
            }
            .auto-scroll ::-webkit-scrollbar-thumb {
                background: #fff;
            }
        </style>
    </body>
</html>

标签： javascripthtmlcss

解决方案

你不需要javascript，你可以像下面的代码一样在css中制作它

div{
    width: 100%;
    background-color: black;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
p{
    display: inline-block;
    color: #FFF;
    padding-left: 100%;
    animation: move 25s linear infinite;
}
@keyframes move {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
<div>
  <p>This text should scroll. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi commodi magni quo officia error ab veniam aspernatur. Quos ducimus, hic, maxime dicta optio quidem nostrum sint commodi velit, ut distinctio. And return to beginning.</p>
</div>

推荐阅读