<div class="container">
  <ul class="ul-container">
    <li class="li-container plus">
      <span class="name">富国天盈债券C</span>
      <span class="value">+6.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">博时四月享120天</span>
      <span class="value">-0.12%</span>
    </li>
    <li class="li-container">
      <span class="name">易方达稳悦</span>
      <span class="value">+3.51%</span>
    </li>
    <li class="li-container plus">
      <span class="name">华夏稳鑫</span>
      <span class="value">+4.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">工行稳健</span>
      <span class="value">-6.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">鹏华丰泽</span>
      <span class="value">-1.51%</span>
    </li>
    <li class="li-container plus">
      <span class="name">富国天盈债券C</span>
      <span class="value">+6.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">博时四月享120天</span>
      <span class="value">-0.12%</span>
    </li>
    <li class="li-container">
      <span class="name">易方达稳悦</span>
      <span class="value">+3.51%</span>
    </li>
    <li class="li-container plus">
      <span class="name">华夏稳鑫</span>
      <span class="value">+4.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">工行稳健</span>
      <span class="value">-6.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">鹏华丰泽</span>
      <span class="value">-1.51%</span>
    </li>
  </ul>
  <ul class="ul-container second">
    <li class="li-container plus">
      <span class="name">富国天盈债券C</span>
      <span class="value">+6.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">博时四月享120天</span>
      <span class="value">-0.12%</span>
    </li>
    <li class="li-container">
      <span class="name">易方达稳悦</span>
      <span class="value">+3.51%</span>
    </li>
    <li class="li-container plus">
      <span class="name">华夏稳鑫</span>
      <span class="value">+4.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">工行稳健</span>
      <span class="value">-6.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">鹏华丰泽</span>
      <span class="value">-1.51%</span>
    </li>
    <li class="li-container plus">
      <span class="name">富国天盈债券C</span>
      <span class="value">+6.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">博时四月享120天</span>
      <span class="value">-0.12%</span>
    </li>
    <li class="li-container">
      <span class="name">易方达稳悦</span>
      <span class="value">+3.51%</span>
    </li>
    <li class="li-container plus">
      <span class="name">华夏稳鑫</span>
      <span class="value">+4.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">工行稳健</span>
      <span class="value">-6.51%</span>
    </li>
    <li class="li-container minus">
      <span class="name">鹏华丰泽</span>
      <span class="value">-1.51%</span>
    </li>
  </ul>
</div>
ul, li {
  list-style: none;
}

.container{
  --gap: 2rem;
  display: flex;
  gap: var(--gap);
  font-size: 15px;
  overflow: hidden;
}
.ul-container{
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  justify-content: space-between;
  animation: 20s carousel linear infinite;
}
.ul-container:hover{
  animation-play-state: paused;
}
@keyframes carousel{
  to{
    transform: translateX(-100%);
  }
}
.li-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.name{
  flex-basis: auto;
  display: inline-block;
  white-space: nowrap;
  margin-right: 4px;
  font-weight: bold;
}
.value{
  display: inline-block;
}
.plus .value{
  color: green;
}
.plus .name::before{
  content: '👆'
}
.minus .value{
  color: red;
}
.minus .name::before{
  content: '👇'
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.