个人中心
gpt4 book ai didi

html - 为什么添加第三个元素会破坏此 CSS 关键帧 slider ？

转载 作者：行者123 更新时间：2023-11-28 15:10:46 24 4
gpt4 key购买 nike

我已尽我所能获得此代码。原来我有两个元素滚动。然后我想添加第三个。然而，当我添加第三个元素时，它把所有东西都扔掉了。我相信我在某处的关键帧计算中遗漏了一些东西。不确定。

我错过了什么？我需要三个、四个或五个元素，但无论使用什么设备，它们始终居中。它们与两个元素完美居中，但如果我添加另一个元素则不会。

#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(-50%); flex-direction:row;}
     95% { 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>

最佳答案 

<!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>

尝试跑孔代码

关于html - 为什么添加第三个元素会破坏此 CSS 关键帧 slider ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51343739/

24 4 0
文章推荐： javascript - ng-repeat 使用 Angular 中的 json 数据与 optgroup 进行选择
文章推荐： javascript - Javascript 中的 document.title 问题
文章推荐： html - 如何保持两个不同 HTML 元素之间的高度和宽度？
文章推荐： css - 无法在 CSS 编码中更改文本颜色
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com