Question

我试图动画句子的第二部分来改变单词。 div框是不变的部分，div字是变化的部分。即使在我阅读的每个指南中，它都说定义位置为绝对位置，隐藏溢出将固定句子第二部分的起始位置，它仍然在不断变化。这是我的CSS：

body
{
    margin: 0;
    padding: 0;
    background: #B4B8AB;
}
.box
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3em;
    font-family: arial;
    color: #fff;
    margin-left: 150px;
    width: calc(100% - 50px)
    text-shadow: 0 2px 2px rgba(0,0,0,.5);
}
.word
{
    display: inline-block;
    color: #e65c00;
}
.word span
{
    position: aboslute;
    top: 0;
    overflow: hidden;
    animation: animate 12s linear infinite 0s;
    opacity: 0;
}
@keyframes animate
{
    0%
    {
        opacity: 0;
        transform: translateY(-50px);
    }
    2%
    {
        opacity: 1;
        transform: translateY(0px);
    }
    15%
    {
        opacity: 1;
        transform: translateY(0px);
    }
    20%
    {
        opacity: 0;
        transform: translateY(50px);
    }    
    80%
    {
        opacity: 0;
        transform: translateY(50px);
    }
    100%
    {
        opacity: 0;
        transform: translateY(50px);
    }
}
.word span:nth-child(1)
{
    animation-delay: 0s;
}
.word span:nth-child(2)
{
    animation-delay: 2s;
}
.word span:nth-child(3)
{
    animation-delay: 4s;
}
.word span:nth-child(4)
{
    animation-delay: 6s;
}
.word span:nth-child(5)
{
    animation-delay: 8s;
}
.word span:nth-child(6)
{
    animation-delay: 10s;
}

HTML：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tickets</title>
        <link rel="stylesheet" href="homepage.css">
    </head>
    <body>
        <div id="menu">
            <div class="logo">
                <nav>
                <a href="/"><img src="../images/mylogo.png" height="30" width="156" /></a>
                </nav>
            </div>
        </div>
        <div class="box">
            Sick of&nbsp;
            <div class="word">
                <span>wasting your time and money?</span>
                <span>unreliable Ubers?</span>
                <span>being stuck in traffic?</span>
                <span>waiting in line?</span>
                <span>sold out tickets?</span>
                <span>logistical nightmares?</span>
            </div>
        </div>
    </body>
</html>

Answer 1

在CSS

中找到第26行的错误

position: aboslute;

将其更改为absolute，您就可以了;）

Fiddle example here

另外，非常酷的效果！

新请求

想出来。缺少;

＆＃13;

.box
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3em;
    font-family: arial;
    color: #fff;
    margin-left: 150px;
    width: calc(100% - 50px); /* <--- Right here  */
    text-shadow: 0px 2px 2px rgba(0,0,0,.5);
}

＆＃13;

New Fiddle example here

改变单词动画，但位置不断变化

1 个答案: