html – 用于可变消息长度的CSS Marquee

我正在寻找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>

原文地址：https://www.jb51.cc/html/226768.html