问题描述
我想知道如何才能做到这一点。我想做一个无限循环滑块。但是我不能让它一开始越过右边就出现在另一边。有什么想法吗?这是现在的样子
这是我的代码:
<div className='home-container'>
<div className='slider-top'>
<img className='top-28866' src={Home28866}
alt="Home28866Top1" />
<img className='top-28866' src={Home28866}
alt="Home28866Top2" />
<img className='top-28866' src={Home28866}
alt="Home28866Top3" />
<img className='top-28866' src={Home28866}
alt="Home28866Top4" />
<img className='top-28866' src={Home28866}
alt="Home28866Top5" />
<img className='top-28866' src={Home28866}
alt="Home28866Top6" />
</div>
</div>
.slider-top {
display: flex;
justify-content: space-between;
animation: marquee-mobile 20s infinite cubic-bezier(0.53,0.47,1,1);
width: 100%;
height: 5vw;
padding-top: 3vw;
overflow: hidden;
-webkit-Box-pack: start;
}
@keyframes marquee-mobile {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
解决方法
您可以将内容翻倍
纯文本:
[container] {
display: inline-block;
overflow: hidden;
}
[marquee] {
position: relative;
white-space: nowrap;
padding: 10px;
animation: t 3s linear infinite;
}
[marquee]:before {
content: attr(data);
}
[marquee]:after {
content: attr(data);
position: absolute;
left: 100%;
top: 0;
padding: inherit;
}
@keyframes t {
to {
transform: translateX(-100%);
}
}
<div container>
<div marquee data="Lorem Ipsum is simply dummy text of the print">
</div>
</div>
标记:
[container] {
overflow: hidden;
max-width: 100%;
}
[marquee] {
display: inline-block;
position: relative;
animation: t 10s linear infinite;
}
[content],[dupContent] {
display: inline-flex;
white-space: nowrap;
}
[dupContent] {
position: absolute;
left: 100%;
top: 0;
}
@keyframes t {
to {
transform: translateX(-100%);
}
}
[box]:nth-child(1) {
background: hsla( 0,100%,50%,0.8);
}
[box]:nth-child(2) {
background: hsla( 40,0.8);
}
[box]:nth-child(3) {
background: hsla( 80,0.8);
}
[box]:nth-child(4) {
background: hsla(120,0.8);
}
[box]:nth-child(5) {
background: hsla(160,0.8);
}
[box]:nth-child(6) {
background: hsla(200,0.8);
}
[box]:nth-child(7) {
background: hsla(240,0.8);
}
[box]:nth-child(8) {
background: hsla(280,0.8);
}
[box]:nth-child(9) {
background: hsla(320,0.8);
}
[box] {
padding: 20px;
font-size: 80px;
font-weight: bold;
color: white;
}
<div container>
<div marquee>
<div content>
<div box>1</div>
<div box>2</div>
<div box>3</div>
<div box>4</div>
<div box>5</div>
<div box>6</div>
<div box>7</div>
<div box>8</div>
<div box>9</div>
</div>
<div dupContent>
<div box>1</div>
<div box>2</div>
<div box>3</div>
<div box>4</div>
<div box>5</div>
<div box>6</div>
<div box>7</div>
<div box>8</div>
<div box>9</div>
</div>
</div>
</div>
注意:我们在这里处理的是绝对定位,因此如果您是填充/边距或任何类型的定位,则需要稍微小心
,div {
width: 50px; /* Changeable*/
position: relative;
animation-name: example;
animation-duration: 2s; /* Changeable */
animation-iteration-count: infinite; /* Changeable */
animation-timing-function: linear;
}
/* Everything in @keyframes example{} is changeable */
@keyframes example {
0% {left:-20%; top:0px;}
100% {left:102%; top:0px;}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div>Placeholder text</div>
</body>
</html>
这是你的意思吗?我将“/* Changeable */”标签添加到您可以自定义而不会弄乱动画的任何内容。当然,您也可以添加自己的 css。