@CodeUniquely 我最终改变了水平滚动的结构,是的,我只是使用生成的图像作为占位符。 以下是我所做的:
content
content
content
还有 CSS:.scroll {
background-color: white;
width: 300px;
height: 100px;
float: left;
line-height: 19px;
}
.scroll span4 {
color: black;
font-size: 14px;
}
.scroll span5 {
width: 100px;
height: 100px;
display: inline-block;
float: left;
background-color: #d6d6d6;
}
.scroll span6 {
color: black;
font-size: 14px;
}
.scroll span7 {
width: 100px;
height: 100px;
display: inline-block;
float: left;
background-color: #00274c;
}
.scroll img {
height: 50px;
text-align: left;
margin-top: 25px;
text-align: center;
}
.items {
width: 1200px;
-webkit-animation: hscroll 20s infinite;
-moz-animation: hscroll 20s infinite;
-ms-animation: hscroll 20s infinite;
}
@-webkit-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -300px; }
60.66% { margin-left: -300px; }
66.66% { margin-left: -600px; }
94.99% { margin-left: -600px; }
100% { margin-left: 0 }
}
@-webkit-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -300px; }
60.66% { margin-left: -300px; }
66.66% { margin-left: -600px; }
94.99% { margin-left: -600px; }
100% { margin-left: 0 }
}
@-webkit-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -300px; }
60.66% { margin-left: -300px; }
66.66% { margin-left: -600px; }
94.99% { margin-left: -600px; }
100% { margin-left: 0 }
}
.links_body1 {
text-align: left;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-left: 0px;
width: 300px;
height: 100px;
padding: 0;
background-color: white;
position: relative;
overflow: hidden;
text-align: center;
}