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

回答

相關問題