需要从底部连续滚动文本,就像公告板添加一样,现在它从下到上滚动但是文本是合并的。它应该与通知板列表从底部滚动的方式相同。它们是如此之多的通知所以它应该通过滚动逐个显示。
.marquee {
height: 100px;
overflow: hidden;
position: relative;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 5s linear infinite;
-webkit-animation: scroll-up 5s linear infinite;
animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-up {
0% {
-moz-transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%);
}
}
@-webkit-keyframes scroll-up {
0% {
-webkit-transform: translateY(100%);
}
100% {
-webkit-transform: translateY(-100%);
}
}
@keyframes scroll-up {
0% {
-moz-transform: translateY(100%);
/* Browser bug fix */
-webkit-transform: translateY(100%);
/* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%);
/* Browser bug fix */
-webkit-transform: translateY(-100%);
/* Browser bug fix */
transform: translateY(-100%);
}
}

<div class=" marquee">
<p>Patient information management.</p>
<p>Doctor information management.</p>
<p>User management.</p>
<p>Pathology.</p>
<p>Ward management</p>
<p>Pharmacy</p>
</div>
&#13;
Jsfiddle链接在这里添加了css http://jsfiddle.net/f1on2ejp/3/
答案 0 :(得分:0)
每个元素的p
标记都会单独设置动画,只需将它们放在由p
</br>
标记中
.marquee {
height: 100px;
overflow: hidden;
position: relative;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
/* Starting position */
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 5s linear infinite;
-webkit-animation: scroll-up 5s linear infinite;
animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
@keyframes scroll-up {
0% {
-moz-transform: translateY(100%);
/* Browser bug fix */
-webkit-transform: translateY(100%);
/* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%);
/* Browser bug fix */
-webkit-transform: translateY(-100%);
/* Browser bug fix */
transform: translateY(-100%);
}
}
&#13;
<div class=" marquee">
<p>Patient information management.<br> Doctor information management.<br> User management.<br> Pathology.
<br> Ward management<br> Pharmacy
</p>
</div>
&#13;