我正在努力在我的网站上放置一个字幕，我发现了一个网络教程，它正好可以完成两个元素:
http://www.hongkiat.com/blog/css3-animation-advanced-marquee/
我需要它来处理与 .marquee 类中一样多的元素，因为我正在从数据库中读取它们。如果我只有一个 p:nth-child(1)，效果会很好，但我不知道在任何给定时间会有多少个 child 。
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;
}
如有任何帮助，我们将不胜感激。
最佳答案
您必须将元素计数作为 HTML 属性传递，例如 class='marquee item-count-5'，然后将相应的关键帧分配给子元素。
没有仅使用 CSS 的干净解决方案，因为:
您只能通过定义多个@keyframe 定义来做到这一点，因为使用动画延迟和相同的关键帧不起作用，因为您不能在动画之间创建延迟。这是我未完成的，因为破解不成功:http://codepen.io/franzskuffka/pen/XbzRBY
关于使用 nth-child(1n+1) 的 CSS3 选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31014262/