如何使用 HTML5 CSS3 创建无限文本列表滚动器垂直循环以及是否使用 JavaScript

Question

我想要一个类似于阿里巴巴主页上的动画，当您向下滚动到该站点并向下到达 RFQ 报价请求部分右侧表单区域时。在网站的该部分附上一张图片以供参考。

我试过这个代码：

.rfq-scroll-main
{
    box-sizing: content-box;
    color: #333;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    display: inline-block;
    position: relative;
    
}

.rfq-list-scroll-wrapper
{
    width: 608px;
    height: 30px;
    margin: 25px 0;
    margin-top: 25px;
    margin-right: 0px;
    margin-bottom: 25px;
    margin-left: 0px;
    position: relative;
    vertical-align: baseline;
    display: inline-block;
    color: #333;
    font-family: 'Roboto', sans-serif;
    background: transparent;
}
.rfq-list
{
    height: 30px;
    overflow: hidden;
    display: inline-block;
}

.rfq-list div span
{
    padding: -4px 15px 10px 15px;
    height: 30px;
    margin-bottom: 32px;
    display: inline-block;
}

.rfq-list div span:first-child
{
    animation: scroll 25s infinite;
}

@keyframes scroll
{
    0% 
    {
        transform: translateY(0);
    }

    6.66667%
    {
        transform: translateY(0);
        
    }

    8.33333%
    {
        transform: translateY(-18px);
        
    }

    15%
    {
        transform: translateY(-18px);
        
    }

    16.6667%
    {
        transform: translateY(-36px);
        
    }

    23.3333%
    {
        transform: translateY(-36px);
        
    }

    25%
    {
        transform: translateY(-54px);
        
    }

    31.6667%
    {
        transform: translateY(-54px);
        
    }

    33.3333% 
    {
        transform: translateY(-72px);
        
    }

    40%
    {
        transform: translateY(-72px);
        
    }

    41.6667%
    {
        transform: translateY(-90px);
        
    }

    48.3333%
    {
        transform: translateY(-90px);
        
    }

    50%
    {
        transform: translateY(-108px);
        
    }

    56.6667%
    {
        transform: translateY(-108px);
       
    }

    58.3333% 
    {
        transform: translateY(-126px);
        
    }

    65% 
    {
        transform: translateY(-126px);
        
    }

    66.6667% 
    {
        transform: translateY(-144px);
        
    }

    73.3333% 
    {
        transform: translateY(-144px);
        
    }

    75% 
    {
        transform: translateY(-162px);
        
    }

    81.6667% 
    {
        transform: translateY(-162px);
        
    }

    83.3333% 
    {
        transform: translateY(-180px);
        
    }

    90% 
    {
        transform: translateY(-180px);
        
    }

    91.6667% 
    {
        transform: translateY(-198px);
        
    }

    98.3333% 
    {
        transform: translateY(-198px);
       
    }

    100% 
    {
        transform: translateY(-216px);
        
    }


}

<div class="rfq-scroll-main">
     <div class="rfq-list-scroll-wrapper">
          <div class="rfq-list">
               <div><span>"item-info-rfq">"Hotel wooden hanger " from  <img src="images/kr.gif">  Y***** received 4 quotation(s)</span></div>
               <div><span>"item-info-rfq2">"customized t shirts" from <img src="images/uk.gif"> t***** received 6 quotation(s)</span></div>
               <div><span>"med bag pack" from <img src="images/ca.gif"> C***** received 4 quotation(s)</span></div>
               <div><span>Morbi at dui non turpis suscipit ultricies sit amet non mi.</span></div>
               <div><span>dolor sit amet, consectetur adipiscing elit.</span></div>
               <div><span>Nam dictum magna quis sem porta euismod.</span></div>
               <div><span>Cras scelerisque lacus non venenatis gravida.</span></div>
               <div><span>Morbi at dui non turpis suscipit ultricies sit amet non mi.</span></div>
           </div>
       </div>
  </div>

我所做的这段代码一次显示了两个 div，并且它们的动画方式不可见

请帮忙

Answer 1

这是一个动画关键帧序列问题，我花了一些时间将其配置为正常工作。

这是正确的代码：

.rfq-scroll-main
{
    box-sizing: content-box;
    color: #333;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    display: inline-block;
    position: relative;
    
}

.rfq-list-scroll-wrapper
{
    width: 608px;
    height: 30px;
    margin: 25px 0;
    margin-top: 25px;
    margin-right: 0px;
    margin-bottom: 25px;
    margin-left: 0px;
    position: relative;
    vertical-align: baseline;
    display: inline-block;
    color: #333;
    font-family: 'Roboto', sans-serif;
    background: transparent;
}
.rfq-list
{
    height: 30px;
    overflow: hidden;
    display: inline-block;
}

.rfq-list div span
{
    padding: 5px 15px 5px 15px;
    height: 30px;
    margin-bottom: 32px;
    display: inline-block;
}

.rfq-list div span:first-child
{
    animation: scroll 20s infinite;
}

@keyframes scroll
{
    0% 
    {
        transform: translateY(0);
    }

    6%
    {
        transform: translateY(0);
        
    }

    8%
    {
        transform: translateY(-25px);
        
    }

    14%
    {
        transform: translateY(-25px);
        
    }

    16%
    {
        transform: translateY(-40px);
        
    }

    22%
    {
        transform: translateY(-40px);
        
    }

    24%
    {
        transform: translateY(-70px);
        
    }

    30%
    {
        transform: translateY(-70px);
        
    }

    32% 
    {
        transform: translateY(-100px);
        
    }

    38%
    {
        transform: translateY(-100px);
        
    }

    40%
    {
        transform: translateY(-115px);
        
    }

    46%
    {
        transform: translateY(-115px);
        
    }

    48%
    {
        transform: translateY(-145px);
        
    }

    54%
    {
        transform: translateY(-145px);
       
    }

    56% 
    {
        transform: translateY(-170px);
        
    }

    62% 
    {
        transform: translateY(-170px);
        
    }

    64% 
    {
        transform: translateY(-185px);
        
    }

    70% 
    {
        transform: translateY(-185px);
        
    }

    72% 
    {
        transform: translateY(-215px);
        
    }

    78% 
    {
        transform: translateY(-215px);
        
    }

    80% 
    {
        transform: translateY(-240px);
        
    }

    86% 
    {
        transform: translateY(-240px);
        
    }

    88% 
    {
        transform: translateY(-255px);
        
    }

    94% 
    {
        transform: translateY(-255px);
       
    }

    96% 
    {
        transform: translateY(-288px);
        
    }  

    100% 
    {
        transform: translateY(-288px);
        
    }


}

<div class="rfq-scroll-main">
     <div class="rfq-list-scroll-wrapper">
          <div class="rfq-list">
               <div><span>"Hotel wooden hanger " from  <img src="images/kr.gif">  Y***** received 4 quotation(s)</span></div>
               <div><span>"customized t shirts" from <img src="images/uk.gif"> t***** received 6 quotation(s)</span></div>
               <div><span>"med bag pack" from <img src="images/ca.gif"> C***** received 4 quotation(s)</span></div>
               <div><span>Morbi at dui non turpis suscipit ultricies sit amet non mi.</span></div>
               <div><span>dolor sit amet, consectetur adipiscing elit.</span></div>
                                                          
          </div>
     </div>
</div>