html - CSS3 Marquee 不显示 .marquee 容器中的所有 html 元素

Question

我的 CSS3 选取框效果按预期工作，但是它没有循环遍历我的 <section id="updates_display" class="marquee"></section> 中包含的所有元素。 .

我正在使用 ASP.NET WebForms，并使用绑定(bind)到数据源的 Repeater 来呈现我的 <a></a> Page_Init 上的元素.在我添加紧急和团队更新之前，选取框会显示我的正常更新。现在紧急和团队更新是在运行时创建的，它只循环通过 2 并且在从第一个元素重新开始之前永远不会到达第三个。我假设如果我添加更多，情况会继续如此。

如何强制选取框循环遍历所有 <a></a> section.marquee 中包含的元素？

CSS:

section#updates_display {
    float: left;
    width: 60%;
    height: 25px;
    padding-top: 13px;
}

section.marquee {
    overflow: hidden;
    position: relative;
}

section.marquee a {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 20px;
    text-align: center;
    transform:translateX(100%);
    font-size: 2em;
}

@keyframes left-one {
    0% {
        transform: translateX(100%);
    }

    10% {
        transform: translateX(0);
    }

    40% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes left-two {
    0% {
        transform: translateX(100%);
    }
    50% {
        transform: translateX(100%);
    }
    60% {
        transform: translateX(0);
    }
    90% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

section.marquee a:nth-child(1) {
    animation: left-one 20s ease infinite;
}
section.marquee a:nth-child(2) {
    animation: left-two 20s ease infinite;
}

a.urgent_update {
    color: #FF3D00;
}
a.normal_update {
    color: #00E676;
}
a.team_update {
    color: #FFFF00;
}

HTML:

<section id="updates_display" class="marquee">
    <asp:Repeater ID="UrgentUpdatesRepeater" runat="server" DataSourceID="UrgentUpdatesDataSource">
         <ItemTemplate>
             <a class="urgent_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a>
         </ItemTemplate>
     </asp:Repeater>
     <asp:Repeater ID="TeamUpdatesRepeater" runat="server" DataSourceID="TeamUpdatesDataSource">
         <ItemTemplate>
             <a class="team_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a>
         </ItemTemplate>
     </asp:Repeater>
     <asp:Repeater ID="NormalUpdatesRepeater" runat="server" DataSourceID="NormalUpdatesDataSource">
         <ItemTemplate>
             <a class="normal_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a>
         </ItemTemplate>
     </asp:Repeater>

下面是chrome inspector的内容，显示里面有3个链接，但是只循环显示前2个？

<section id="updates_display" class="marquee">
    <a href="Updates/Post.aspx?p=3" class="urgent_update" target="_blank">Urgent Test</a>
    <a href="Updates/Post.aspx?p=4" class="team_update" target="_blank">Team Test</a>
    <a href="Updates/Post.aspx?p=2" class="normal_update" target="_blank">Test</a>
</section>

编辑:我又玩了一会儿，发现我的问题出在我的 nth-child() 上。在我的选框 CSS 中。我尝试使用 nth-child(even/odd)但这导致我所有的偶数元素同时显示，赔率同时显示，当我找到解决方案时，仍在工作将更新。

Answer 1

我的问题是我不了解如何使用 @keyframes 以及我使用它的目的。我的原始代码基于一个示例，该示例具有一组要滚动的元素。我的解决方案是更多地了解 @keyframes 并编写我自己的动画。我选择将我的链接包装在一个 div 中并将动画应用到该 div。这创建了一个很好的缓慢滚动的水平链接列表。我最终可能会使用 javascript 来计算该 div 中呈现的链接数量，然后根据计数更改我的动画时间，这样它就会始终以较慢的速度滚动所有链接。

CSS:

section.marquee {
    display: block;
    overflow: hidden;
    position: relative;
}

section.marquee_container {
    display: inline;
    width: 200%;
    position: absolute;
    overflow: hidden;
    animation: marquee 20s linear infinite;
}

    section.marquee a {
        display: inline;
        width: 50%;
        height: 100%;
        margin: 0;
        line-height: 20px;
        text-align: center;
        font-size: 2em;
    }



@keyframes marquee {
    0% {
        left: 100%;
    }
    5% {
        left: 90%;
    }
    10% {
        left: 80%;
    }
    15% {
        left: 70%;
    }
    20% {
        left: 60%;
    }
    25% {
        left: 50%;
    }
    30% {
        left: 40%;
    }
    35% {
        left: 30%;
    }
    40% {
        left: 20%;
    }
    45% {
        left: 10%;
    }
    50% {
        left: 0%;
    }
    55% {
        left: -10%;
    }
    60% {
        left: -20%;
    }
    65% {
        left: -30%;
    }
    70% {
        left: -40%
    }
    75% {
        left: -50%;
    }
    80% {
        left: -60%;
    }
    85% {
        left: -70%;
    }
    90% {
        left: -80%;
    }
    95% {
        left: -90%;
    }
    100% {
        left: -100%;
    }

}

a.urgent_update {
    color: #FF3D00;
}
a.normal_update {
    color: #00E676;
}
a.team_update {
    color: #FFFF00;
}

HTML:

    <section id="updates_display" class="marquee">
        <section class="marquee_container">
            <asp:Repeater ID="UrgentUpdatesRepeater" runat="server" DataSourceID="UrgentUpdatesDataSource">
                <ItemTemplate>
                    <a class="urgent_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a>
                </ItemTemplate>
            </asp:Repeater>
            <asp:Repeater ID="TeamUpdatesRepeater" runat="server" DataSourceID="TeamUpdatesDataSource">
                <ItemTemplate>
                    <a class="team_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a>
                </ItemTemplate>
            </asp:Repeater>
            <asp:Repeater ID="NormalUpdatesRepeater" runat="server" DataSourceID="NormalUpdatesDataSource">
                <ItemTemplate>
                    <a class="normal_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a>
                </ItemTemplate>
            </asp:Repeater>
        </section>
    </section>