我正在嘗試使用 translateX 屬性為文本（跨度）水平移動的無限關鍵幀影片。
我設法獲得了無限影片的開始，但是當我到達影片的結尾時，它會“跳”回到開頭而不是平滑。
同樣，當到達影片的最后一個跨度時，我希望我們開始看到第一個跨度的開始，這樣它看起來就像是無限滾動并且在影片結束時沒有空白區域。
我還嘗試為每個跨度創建不同的關鍵幀，但這種方法很難計算速度。
html, body {
margin: 0;
}
.scroll {
display: flex;
position: relative;
width: 100%;
height: 15%;
min-height: 150px;
margin: auto;
background-color: #252525;
overflow: hidden;
z-index: 1;
}
.m-scroll {
display: flex;
position: absolute;
top: 0;
left: 0;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
white-space: nowrap;
transform: scale(2);
transition: all 1s ease;
}
.m-scroll > div {
display: flex;
animation: scrollText 10s infinite linear;
}
.m-scroll h1 {
margin: 0;
margin-right: 150px;
font-size: 25px;
color: #ffffff;
transition: all 2s ease;
}
@keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}<div class="scroll">
<div class="m-scroll">
<div>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
</div>
</div>
</div>那么我怎樣才能讓它變得平滑呢？
這種行為發生在全屏，在小型設備上，問題似乎沒有出現。如果您運行代碼片段，請展開它
uj5u.com熱心網友回復：
我已經剝離了一些東西以提供基本的連續滾動 - 在這個片段中，“句子”（跨度）的總寬度至少為 100vw。
html,
body {
margin: 0;
}
.scroll {
position: relative;
width: 100vw;
height: 15%;
min-height: 150px;
background-color: #252525;
overflow: hidden;
z-index: 1;
margin: 0;
padding: 0;
}
.m-scroll {
overflow_ hidden;
height: 100%;
white-space: nowrap;
animation: scrollText 10s infinite linear;
margin: 0;
font-size: 0;
display: inline-block;
}
span {
font-size: 50px;
display: inline-block;
min-width: 100vw;
margin: 0;
padding: 0;
color: white;
}
@keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}<div class="scroll">
<div class="m-scroll"><span style="rbackground: cyan;">TEXT INFINITE SCROLL </span><span style="rbackground: magenta;">TEXT INFINITE SCROLL </span><span style="rbackground: yellow;">TEXT INFINITE SCROLL </span><span style="rbackground: gray;">TEXT INFINITE SCROLL </span></div>
</div>注意：我洗掉了 flexes，因為我無法讓它們與滾動文本很好地配合。也許有人可以讓我明白這一點。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/438393.html
標籤：html css 动画 css-animations keyframe
上一篇：影片SVG虛線逐漸變為不同的顏色