微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

选框项目重叠

分类：编程问答

如何解决选框项目重叠

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

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

GROUP                                              CONSUMER-ID                                                                                          HOST            CLIENT-ID                                                       #PARTITIONS     
connect-HGV6Yo_toDbSp3sCh9VtJw-1244665500 connector-consumer-HGV6Yo_toDbSp3sCh9VtJw-1244665500-1-a8015253-ba51-499e-9b48-880c893c2d5c /172.24.19.193  connector-consumer-HGV6Yo_toDbSp3sCh9VtJw-1244665500-1 0       
connect-HGV6Yo_toDbSp3sCh9VtJw-1244665500 connector-consumer-HGV6Yo_toDbSp3sCh9VtJw-1244665500-2-e354c341-6c3e-4554-8ac9-d1b7d7dfa524 /172.24.50.167  connector-consumer-HGV6Yo_toDbSp3sCh9VtJw-1244665500-2 0 

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,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,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,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,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,offy=1);
}
.desktopHide {
    display: block;
}
.desktopShow {
    display: none;
}
}

解决方法

基本上，您希望每个 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 设置为 display: none 在问题中给出的代码中的较窄设备上。

该代码段还删除了一些不需要的重复 CSS 以使事情更清晰

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot