Question

我的CSS3选框效果可以正常工作，但它不会遍历我<section id="updates_display" class="marquee"></section>中包含的所有元素。

我使用的是ASP.NET WebForms，我使用与数据源绑定的Repeater在<a></a>上呈现Page_Init元素。在添加紧急和团队更新之前，选框将显示我的正常更新。既然在运行时创建了紧急和团队更新，它只会循环到2，并且在重新开始第一个元素之前永远不会到达第3个。我认为，如果我增加更多，这将继续如此。

如何强制选取框循环浏览<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中检查器的内容，它显示其中包含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>

编辑：我已经玩了一些，发现我的问题在于我的选框CSS中的nth-child()。我尝试使用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>

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

1 个答案: