希望优化这种无限滚动效果,但是我不完全确定在循环回原始图像时如何创建平滑过渡。在 10 多岁时几乎不明显,但在 30 多岁时更明显。我假设它与结束头寸保证金有关,但不能完全确定它。最后一帧的值应该是多少?
HTML:
<div class="container">
<div class="photobanner">
<img class="first" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="container">
<div class="photobanner">
<img class="second" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
</div>
</div>
<div class="container">
<div class="photobanner">
<img class="first" src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/350x150"> …Run Code Online (Sandbox Code Playgroud)