选取框项目重叠

Question

我能够使前两条消息正确滑动而不重叠，并且多次修改代码以尝试在第二条消息之后为所有选取框消息实现相同的输出。

前 2 条选取框消息正常显示，彼此没有重叠。我肯定问题出在关键帧内，但我无法让它工作。

body {
  background-color: black;
}

.marquee-footer.banner-text-overlay.text-center {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
    height: 100px!important;
}
.marquee-footer {
  width: auto;
  height: 50px;
  margin: 25px auto;
  overflow: hidden;
  position: relative;
  margin: 25px auto;  
 
  background-color: transparent;
 
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.marquee-footer h1 {
  font-size: 40px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.marquee-footer h1 {
  transform:translateX(100%);
}
.free-yellow {
    color: #f4c715;
}
@keyframes left-one {
  0%  {
    transform:translateX(100%);
  }
  10% {
    transform:translateX(0);
  }
  40% {
    transform:translateX(0);
  }
  50% {
    transform:translateX(-100%);
  }
  100%{
    transform:translateX(-100%);
  }
}
@keyframes left-two {
  0% {
    transform:translateX(100%);
  }
  50% {
    transform:translateX(100%);
  }
  60% {
    transform:translateX(0);    
  }
  90% {
    transform:translateX(0);    
  }
  100%{
    transform:translateX(-100%);
  }
}

@keyframes left-three {
  0% {
    transform:translateX(100%);
  }
  50% {
    transform:translateX(100%);
  }
  60% {
    transform:translateX(0);    
  }
  90% {
    transform:translateX(0);    
  }
  100%{
    transform:translateX(100%);
  }
}






.marquee-footer h1:nth-child(1) {
  animation: left-one 10s ease infinite;
}
.marquee-footer h1:nth-child(2) {
  animation: left-two 10s ease infinite;
}
.marquee-footer h1:nth-child(3) {
  animation: left-three 10s ease infinite;
}
.desktopShow {
    display: block;
}
.desktopHide {
    display: none;
}
@media screen and (max-width: 800px) {
    .marquee-footer h1 {
  font-size: 34px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}
@media screen and (max-width: 500px) {
    .marquee-footer h1 {
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}
@media screen and (max-width: 414px) {
    .marquee-footer h1 {
  font-size: 26px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 26px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.footer-top {
    height: 100px!important;
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}
@media screen and (max-width: 384px) {
    .marquee-footer h1 {
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}
@media screen and (max-width: 360px) {
    .marquee-footer h1 {
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}

<div class="marquee-footer banner-text-overlay text-center desktopShow">
        <h1>Over <span class="free-yellow">1 Million</span> Happy Customers</h1>
        <h1><span class="free-yellow">FREE</span> ECONOMY SHIPPING</h1>
          <h1><span class="free-yellow">THE ISSUE</span> IS HERE </h1>

      </div>
      <div class="marquee-footer banner-text-overlay text-center desktopHide">
        <h1>Over <span class="free-yellow">1 Million</span> Happy Customers</h1>
        <h1><span class="free-yellow">FREE</span> ECONOMY SHIPPING</h1>
      </div>

Answer 1

基本上您希望每个 h1 具有相同的动画行为但在不同的时间。

所以在这个片段中，所有三个都被赋予了剩下的动画关键帧，但是在开始第二个之前有一个延迟，在开始第三个之前还有一个延迟。

每个动画的显示时间占动画总时间的三分之一，其余三分之二的时间隐藏（宽度的 -100%）。

显然，您可以在 0 到 33.3333% 的范围内更改整体动画时间和 %s 以适合。请注意，如果您说了 4 件商品，那么每件商品的显示率为 25%，而不是 33.3333%，依此类推。

body {
  background-color: black;
  width: 100vw;
}

.marquee-footer.banner-text-overlay.text-center {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
    height: 100px!important;
}
.marquee-footer {
  width: auto;
  width: 100%;
  height: 50px;
  margin: 25px auto;
  overflow: hidden;
  position: relative;
  margin: 25px auto;  
 
  background-color: transparent;
 
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.marquee-footer h1 {
  font-size: 40px;
  font-weight: 600;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
  animation: left 12s ease infinite;
  transform: translateX(100%);
}
.free-yellow {
    color: #f4c715;
}
@keyframes left {
  0%  {
    transform:translateX(100%);
  }
  8.3333% {
    transform:translateX(0);
  }
  25% {
    transform:translateX(0);
  }
  33.3333% {
    transform:translateX(-100%);
  }
  100%{
    transform:translateX(-100%);
  }
}

.marquee-footer h1:nth-child(2) {
  animation-delay: 4s;
}
.marquee-footer h1:nth-child(3) {
  animation-delay: 8s;
}
.desktopShow {
    display: block;
}
.desktopHide {
    display: none;
}
/*
@media screen and (max-width: 800px) {
    .marquee-footer h1 {
  font-size: 34px;
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}
@media screen and (max-width: 500px) {
    .marquee-footer h1 {
  font-size: 24px;
}
}
@media screen and (max-width: 414px) {
    .marquee-footer h1 {
  font-size: 26px;
}
.footer-top {
    height: 100px!important;
}
}
@media screen and (max-width: 384px) {
    .marquee-footer h1 {
  font-size: 24px;
}
}
@media screen and (max-width: 360px) {
    .marquee-footer h1 {
  font-size: 20px;
}
}
*/

<div class="marquee-footer banner-text-overlay text-center desktopShow">
        <h1>Over <span class="free-yellow">1 Million</span> Happy Customers</h1>
        <h1><span class="free-yellow">FREE</span> ECONOMY SHIPPING</h1>
        <h1><span class="free-yellow">THE ISSUE</span> IS HERE </h1>
</div>

注意：您需要运行在较宽的设备上全屏显示代码段，因为 .desktopShow 设置为显示：none 在问题中给出的代码中的较窄设备上。

该代码段还删除了某些 CSS 中不需要的重复项，使内容更加清晰

选取框项目重叠

Marquee Items Overlapping

html

css

animation

marquee