CSS无限滚动div

嗨，我想让div与一个简单的CSS动画滚动。CSS无限滚动div

问题是，它不会循环良好，因为在重新开始滚动之前有一点闪光。

这里是代码：https://jsfiddle.net/by6tx4o0/2/

.c{ 
 
    position:relative; 
 
    background:red; 
 
    max-height:200px; 
 
    float:left; 
 
    width:300px; 
 
    height:300px; 
 
    overflow:hidden; 
 
    overflow-y:auto; 
 
} 
 
.card-home{ 
 
    position:absolute; 
 
    margin:20px; 
 
\t top:0; 
 
    \t animation: scroll 10s linear 1s infinite; 
 
} 
 
span { 
 
    min-width:300px; 
 
    min-height:40px; 
 
    display:block; 
 
    color:white; 
 
    margin:5px; 
 
    background:blue; 
 
} 
 
@keyframes scroll { 
 
\t 100% { top: -100%; } 
 
}

<div class="c">sssss 
 
<div class="card-home"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    <span>5</span> 
 
    <span>6</span> 
 
    <span>7</span> 
 
    <span>8</span> 
 
</div> 
 
</div>

我有什么做的循环时，使这个平稳？

谢谢

来源

2015-12-16 blasta bam

请将代码放入问题中，而不是试图绕过它:-) –

jsfiddle附加，看起来 –

看起来它只是瞬间上升到重新启动时顶部。如果你愿意，你可以基本上做反向动画更快地达到顶峰。 – VictorVH

嗯棘手的一个，如果你希望它是纯CSS，但这里是它的要点将需要一些硬编码值：

.c{ 
 
    position:relative; 
 
    background:red; 
 
    max-height:225px; /*height to show an exact number of spans - in this case span is 45px (40 height plus 5 margin as margins collapse) and we are showing 5 spans to start */ 
 
    float:left; 
 
    width:315px; 
 
    height:225px; 
 
    overflow:hidden; 
 
    overflow-y:auto; 
 
} 
 
.card-home{ 
 
    position:absolute; 
 
\t top:0; 
 
    \t animation: scroll 10s linear 1s infinite; 
 
} 
 
span { 
 
    min-width:290px; 
 
    min-height:40px; 
 
    display:block; 
 
    color:white; 
 
    margin:5px; 
 
    background:blue; 
 
} 
 
@keyframes scroll { 
 
\t 100% { top: -360px; } /* top is the number of spans (in this case 8) multiplied by span height (45px as described above)*/ 
 
}

<div class="c"> 
 
<div class="card-home"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    <span>5</span> 
 
    <span>6</span> 
 
    <span>7</span> 
 
    <span>8</span> 
 
    <!-- copy the number of spans displayed at the beggining onto the end --> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    <span>5</span> 
 
</div> 
 
</div>

另外我想移动滚动条之外的ssss文本，以便您开始使用的前20px边距不会妨碍滚动条

来源

2015-12-16 15:27:27 Pete

如果你想拥有它顺利滚动到顶部，一旦动画完成，一件事，你可以做的就是修改这样的动画，而不是在底部整理一点点，它会在顶部结束（这是原始状态，所以动画重新启动时不会有任何“跳跃”）。

你可以这样做：

滚动使用的动画时间95％的底部。
使用剩余5％向上滚动。

该代码的变化将是非常简单，它不会要求任何JavaScript：

@keyframes scroll { 
    95% { top: -100%; } 
    100% { top:0; } 
}

本演示展示了结果：

.c{ 
 
    position:relative; 
 
    background:red; 
 
    max-height:200px; 
 
    float:left; 
 
    width:300px; 
 
    height:300px; 
 
    overflow:hidden; 
 
    overflow-y:auto; 
 
} 
 
.card-home{ 
 
    position:absolute; 
 
    margin:20px; 
 
    top:0; 
 
    animation: scroll 10s linear 1s infinite; 
 
} 
 
span { 
 
    min-width:300px; 
 
    min-height:40px; 
 
    display:block; 
 
    color:white; 
 
    margin:5px; 
 
    background:blue; 
 
} 
 
@keyframes scroll { 
 
    95% { top: -100%; } 
 
    100% { top:0; } 
 
}

<div class="c">sssss 
 
<div class="card-home"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
    <span>5</span> 
 
    <span>6</span> 
 
    <span>7</span> 
 
    <span>8</span> 
 
</div> 
 
</div>

来源

2015-12-16 14:59:40

CSS无限滚动div

回答

相关问题