Question

我已经掌握了这段代码。原来我有两个项目滚动。然后，我想添加第三个。但是，当我添加第三个项目时，一切都被抛弃了。我相信我在某个关键帧计算中丢失了一些内容。不确定。

我想念什么？我需要三个或四个或五个项目，但无论使用哪种设备，都必须始终将它们居中。它们正好位于两个项目的中心，但是如果我添加另一个项目则不会。



  

  #ticker-banner.hd-tickerloop {
    overflow:hidden;
    width:100%
    }

    .header-banner .header-promotion {
    background-color:#2abad9;
    color:#fff;
    padding:16px 0;
    text-align:center;
    font-size:.875rem;
    letter-spacing:.0375rem
    }
    #ticker-banner.hd-tickerloop {
    overflow:hidden;
    width:100%
    }

    #ticker-banner.hd-tickerloop2 .hd-loop-container {
    display:flex;
    align-items:center;
    width:200%;
    -webkit-animation:tickerloop2 20s infinite;
    animation:tickerloop2 15s infinite;
    animation-duration:15s
    }

    #ticker-banner.hd-tickerloop2 .hd-loop-container:hover,#ticker-banner.hd- 
     tickerloop2 .hd-loop-container:active,#ticker-banner.hd-tickerloop2 .hd- 
     loop- 
     container:focus-within {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused
    }

    #ticker-banner.hd-tickerloop2 .ticker-item {
    width:75%;
    }
    .ticker-item {
    font-size:12px;
    line-height:1.4em;
    color:#fff;
    text-decoration:none
    }

    #ticker-banner.hd-tickerloop2 .ticker-item {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:0 2em
    }

   @keyframes tickerloop2 {
          0% { transform:translateX(0);    flex-direction:row; }
         40% { transform:translateX(0);    flex-direction:row; }
         50% { transform:translateX(-50%); flex-direction:row; }
    89.9999% { transform:translateX(-50%); flex-direction:row; }
         90% { transform:translateX(0);    flex-direction:row-reverse; }
    99.9999% { transform:translateX(-50%); flex-direction:row-reverse; }
        100% { transform:translateX(0);    flex-direction:row; }
    }
<div class="header-banner">
    <div class="header-promotion">
        <div id="ticker-banner" class="hd-tickerloop hd-tickerloop2">
            <div class="hd-loop-container">
               <div id="ticker-item1" class="ticker-item" tabindex="0">Do You Want To Save 10%? Click Here To Subscribe + Save</div>
               <div id="ticker-item2" class="ticker-item" tabindex="0">Receive Free Shipping On All U.S. Orders of $65 Or More</div>
               <div id="ticker-item3" class="ticker-item" tabindex="0">Clean Beauty. Because Girl, You're Too Pretty To Posion™</div>
               
            </div>
        </div>
    </div>
</div>

Answer 1

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
#ticker-banner.hd-tickerloop {
    overflow:hidden;
    width:100%
    }

    .header-banner .header-promotion {
    background-color:#2abad9;
    color:#fff;
    padding:16px 0;
    text-align:center;
    font-size:.875rem;
    letter-spacing:.0375rem
    }
    #ticker-banner.hd-tickerloop {
    overflow:hidden;
    width:100%
    }

    #ticker-banner.hd-tickerloop2 .hd-loop-container {
    display:flex;
    align-items:center;
    width:300%;
    -webkit-animation:tickerloop2 20s infinite;
    animation:tickerloop2 15s infinite;
    animation-duration:15s
    }

    #ticker-banner.hd-tickerloop2 .hd-loop-container:hover,#ticker-banner.hd- 
     tickerloop2 .hd-loop-container:active,#ticker-banner.hd-tickerloop2 .hd- 
     loop- 
     container:focus-within {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused
    }

    #ticker-banner.hd-tickerloop2 {
    width:75%;
    margin-right:5%;
    }
    .ticker-item {
    font-size:12px;
    line-height:1.4em;
    color:#fff;
    text-decoration:none
    }
    .ticker-item{
  width:100%;
    }

    #ticker-banner.hd-tickerloop2 .ticker-item {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:0 2em
    }

   @keyframes tickerloop2 {
          0% { transform:translateX(5%);    flex-direction:row;}
         40% { transform:translateX(5%);    flex-direction:row; }
         45% { transform:translateX(-30%); flex-direction:row; }
         60% { transform:translateX(-30%); flex-direction:row; }    
         70% { transform:translateX(-63%);    flex-direction:row;}
         100% { transform:translateX(-63%);    flex-direction:row;}

    }
</style>

</head>
<body>

<div class="header-banner">
    <div class="header-promotion">
        <div id="ticker-banner" class="hd-tickerloop hd-tickerloop2">
            <div class="hd-loop-container">
               <div id="ticker-item1" class="ticker-item" tabindex="0">Do You Want To Save 10%? Click Here To Subscribe + Save</div>
               <div id="ticker-item2" class="ticker-item" tabindex="0">Receive Free Shipping On All U.S. Orders of $65 Or More</div>
               <div id="ticker-item3" class="ticker-item" tabindex="0">Clean Beauty. Because Girl, You're Too Pretty To Posion™</div>
               
            </div>
        </div>
    </div>
</div>

</body>
</html>

尝试跑孔代码

添加第三个项目会破坏此CSS关键帧滑块

1 个答案: