上效果图:
上代码:
<div id="tips" :style="'--textWidth--:'+ msg.length+'em'">
<span class="span1">{{msg}}</span>
<span class="span2">{{msg}}</span>
</div>
#tips{
position: relative;
width: 100%;
line-height: 40px;
height: 40px;
background: #FFEEAA;
overflow: hidden;
color: #FF0000;
}
#tips span{
position: absolute;
left: 0;
margin: 0 10px;
white-space: nowrap;
}
@keyframes around1 {
from {
left: 0;
}
to {
/* left: calc(0px - var(--textWidth--) - 10px); */
left: -100%;
}
}
@keyframes around2 {
from {
/* left: calc(var(--textWidth--) + 10px); */
left: 100%;
}
to {
left: 0;
}
}
#tips .span1{
animation: around1 10s linear infinite;
}
#tips .span2{
animation: around2 10s linear infinite;
}
data(){
return{
msg:"这是一条会滚动的提示信息!",
}
}
如果字符串长度过长导致重叠的话,可以用var(--textWidth--)
。