我正在寻找marquee标签替代品,并找到了如何通过CSS进行此操作.但是我使用的消息是可变长度的,所以可以选择将’45s’属性设置为100％,这样无论消息有多长或多短,消息都会显示所有消息和循环消息显示后再次显示？
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
color: #ffffff;
background-color: #000000;
font-family: Arial Rounded MT Bold;
}
.marquee span {
display: inline-block;
padding-left: 100%; /* show the marquee just outside the paragraph */
animation: marquee 45s linear infinite;
}
@keyframes marquee {
from { text-indent: 0%}
to { text-indent: -150% }
}
<p id="PassengerNews_Scrollbar" class="microsoft marquee" style="height: 95%; width: 90%;left: 5%;top: 2%;font-size: 7%;"> <span>|*NewsData*|</span> </p>
解决方法
你想要这样的东西吗？
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
color: #ffffff;
background-color: #000000;
font-family: Arial Rounded MT Bold;
height: 90%;
width: 90%;
left: 5%;
top: 5%;
font-size: 7%;
}
.marquee .line__wrap {
display: block;
position: absolute;
width: auto;
left: 0;
animation: marquee__wrap 2s linear infinite;
font-size: 18px;
}
.marquee .line {
position: relative;
margin-left: -100%;
animation: marquee 2s linear infinite;
}
@keyframes marquee__wrap {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
@keyframes marquee {
from {
left: 100%;
}
to {
left: 0%;
}
}
<p id="PassengerNews_Scrollbar" class="microsoft marquee">
<span class="line__wrap">
<span class="line">|*NewsData*|</span>
</span>
<span class="line__wrap" style="top: 30px;">
<span class="line">|*NewsData*|long long long long massage</span>
</span>
</p>