Question

我有一个使用css动画选框运行的选框（是的）。

然而，客户希望它在屏幕左侧再次开始显示，然后才从右侧完全消失？

所以在完成滑出之前重新开始。

动画的CSS：

.sliding-marquee ul {
    text-align: right;
    left: 0;
    top: 0;
    position: absolute;
    animation: marquee 20s linear infinite;
    -webkit-animation: marquee 20s linear infinite;
    white-space: nowrap;
    font-family: "futura-pt-n4","futura-pt",sans-serif;
}

@keyframes marquee {
    0%   { left: -1120px }
    100% { left: 105% }
}

@-webkit-keyframes marquee {
    0%   { left: -1120px }
    100% { left: 105% }
}

Answer 1

为此，您需要将ul分解为3个单独的项目。

请注意，您需要计算每个项目的长度和时间，以使其看起来很好。

.sliding-marquee {
  width: 100%;
  height: 44px;
  background-color: #000;
  opacity: 0.6;
  color: white;
  line-height: 44px;
  position: absolute;
  left: 0;
  top: 105px;
  overflow: hidden;
  z-index: 100;
}

.sliding-marquee span {
  display: inline-block;
  font-size: 20px;
  text-transform: uppercase;
  position: absolute;
  font-weight: 500;
  left: -300px;
  width: 300px;
}

.sliding-marquee span:nth-child(1) {
  animation: marquee 9s linear infinite;
}
.sliding-marquee span:nth-child(2) {
  animation: marquee 9s linear infinite;
  animation-delay: 3s;
}
.sliding-marquee span:nth-child(3) {
  animation: marquee 9s linear infinite;
  animation-delay: 6s;
}

@keyframes marquee {
  0%   { left: -300px }
  100% { left: 105% }
}

<div class="sliding-marquee">
  <span>Stores Opened</span>
  <span>Brands Approved</span>
  <span>Regions supplied</span>
</div>

CSS Marquee动画 - 在完整的关闭屏幕之前再次显示内容

1 个答案: