小编bla*_*bam的帖子

CSS无限滚动div

嗨,我正在尝试使用简单的 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;
	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 {
	100% { top: -100%; }
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

循环时我该怎么做才能使这个平滑?

谢谢你

javascript css animation

1
推荐指数
1
解决办法
2万
查看次数

标签 统计

animation ×1

css ×1

javascript ×1