Question

我正在努力将一个选框放到我的网站上，我发现了一个可以完成两个项目的网络教程：

http://www.hongkiat.com/blog/css3-animation-advanced-marquee/

我需要这个来处理.marquee类中的项目，因为我正在从数据库中读取它们。如果我只有一个p：nth-child（1），它会很有效，但我不知道在任何给定时间会有多少个孩子。

HTML：

<body>
    <p>
        <div class="marquee">
            <p>This is the first text.</p>
            <p>This is the second.</p>
            <p>Some other announcement here.</p>
            <p>Hello World.</p>
            <p>Something Here.</p>
            <p>Last Announcement.</p>
        </div>
    </p>
</body>

CSS：

.marquee {
    width: 500px;
    height: 50px;
    margin: 25px auto;
    overflow: hidden;
    position: relative;
    border: 1px solid #000;
    margin: 25px auto;
    background-color: #222;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
}
.marquee p {
    position: absolute;
    font-family: Tahoma, Arial, sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 0px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=1);
}
.marquee p {
    transform:translateX(100%);
}
@keyframes left {
    0% {
        transform:translateX(100%);
    }
    10% {
        transform:translateX(0);
    }
    40% {
        transform:translateX(0);
    }
    50% {
        transform:translateX(-100%);
    }
    100% {
        transform:translateX(-100%);
    }
}
.marquee p:nth-child(n) {
    animation: left 10s ease infinite;
}

非常感谢任何帮助。

http://jsfiddle.net/BethFNewbie/Lc6gct3f/

Answer 1

您必须将项目计数作为HTML属性传递，例如class='marquee item-count-5'，然后将相应的关键帧分配给子元素。

没有使用CSS的干净解决方案，因为：

您只能通过定义多个@keyframe定义来执行此操作，因为使用动画延迟和相同的关键帧不能用作，您无法在动画之间创建延迟。这是我未完成的，因为不成功的黑客：http://codepen.io/franzskuffka/pen/XbzRBY

使用nth-child（1n + 1）的CSS3 Marquee

1 个答案:

没有使用CSS的干净解决方案，因为：