Question

我试图在彩色背景框内来回移动一行文字。我可以用marquee标签做得很漂亮，但是我听说不推荐使用它，所以我决定使用CSS代替。虽然我从CSS教程中复制了动画功能的形式，但我无法弄清楚为什么这条线不会移动。你能告诉我我的代码有什么问题吗？

我的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" charset="UTF-8">
        <title>Part 1</title>
        <link rel="stylesheet" content="text/css" href="part1-2.css">
    </head>

    <body>
        <div class="background">
            <div class="title">I'm moving</div>
        </div>
    </body>
</html>

我的CSS代码：

div.background
{
    width: 100%;
    height: 50px;
    background-color: #ffcc00;
}

div.title
{
    position: relative;
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    -webkit-animation: movingtitle 10s infinite alternate linear;
    animation: movingtitle 10s infinite alternate linear;
}

@-webkit-keyframes movingtitle
{
    from {left: 0px;}
    to {left: 1366px;}
}

Answer 1

您可以使用text-indent：

div.background
{
    width: 100%;
    height: 50px;
    background-color: #ffcc00;
}

div.title
{
    position: relative;
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    -webkit-animation: movingtitle 10s infinite alternate linear;
    animation: movingtitle 10s infinite alternate linear;
  /* added */
  white-space:nowrap;
  overflow:hidden;
}

@-webkit-keyframes movingtitle
{
/* modified */
    to {text-indent:100%;}
}
@keyframes movingtitle
{
/* modified */
    to {text-indent:100%;}
}

<div class="background">
            <div class="title">I'm moving</div>
        </div>

Answer 2

您没有实现在某些浏览器中调用的简单@keyframes函数，也可能是您的函数。您也可以在margin函数中使用animation，如下所示

@-webkit-keyframes movingtitle
{
    from {margin-left: 0px;}
    to {margin-left: 1366px;}
}
@keyframes movingtitle
{
    from {margin-left: 0px;}
    to {margin-left: 1366px;}
}

希望它有效!!!

使用CSS移动文本

2 个答案: