我想做一个没有空格的垂直标记循环,但我似乎不能让它重复。我添加了 aria-hidden="true"
这在我的水平标语上是有效的,但似乎不是这次的修复方法。
这里是一个带有marquee的代码笔。https:/codepen.iotheomarusmanpenoNbBgej。
编辑:行和列的标签是没有用的,我是用另一个marquee的代码来做这个marquee的,在那里我用了它的行和列。
/* Please try this instead */
body {
background-color: black;
}
.side-bar {
top: 0;
left: 0;
height: 100%;
color: white;
writing-mode: vertical-rl;
text-orientation: sideways-right;
}
.marquee p {
overflow: hidden;
white-space: nowrap;
height: 100%;
}
.marquee span {
animation: marquee 8s linear infinite;
display: inline-flex;
padding-right: 10px;
font-size: 4rem;
}
@keyframes marquee {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
<div class="position-fixed side-bar">
<div class="row marquee">
<div class="col-12 bg-white">
<p class="m-0 p-0 p-3">
<span class="m-0 p-0 pb-4" aria-hidden="true">USE CODE "MLT"</span>
<span class="m-0 p-0 pb-4" aria-hidden="true">USE CODE "MLT"</span>
<span class="m-0 p-0" aria-hidden="true">USE CODE "MLT"</span>
</p>
</div>
</div>
</div>
.marquee {
overflow: hidden;
white-space: nowrap;
}
@keyframes marquee {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
这段代码改成了以下内容。
.marquee p{
overflow: hidden;
white-space: nowrap;
height:100%;
}
@keyframes marquee {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
在codepen中解决
https:/codepen.ioRayeesacpenOJMWMpm。
更多的例子是