如何使用 HTML5 CSS3 創建無限文本列表滾動垂直循環以及是否使用 JavaScript

Question

我想要一個類似於 Alibaba.com 主頁上的 animation，當您向下滾動到該站點時，向下到達報價單部分右側表單區域的 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，並且它們的 animation 是不可見的

請幫忙

Answer 1

這是一個 animation 關鍵幀序列問題，我花了一些時間並能夠將其配置為正常工作。

這是正確的代碼：

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