如何解决如何使用HTML5 CSS3创建无限文本列表滚动器垂直循环以及是否使用JavaScript
当您向下滚动到网站并到达RFQ请求报价部分右侧表单区域时，我想要一个类似于Alibaba.com主页上的动画。作为参考，请在网站的该部分附加图片。
我尝试过此代码：
.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，并且看不到它们的动画方式
请帮助
解决方法
这是一个动画关键帧序列问题，我花了一些时间并能够对其进行正确配置。
此处是正确的代码：
.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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。