CSS轮播无限滚动，循环时不抖动

问题描述 投票：0回答：1

我有轮播的代码。问题是，当它到达循环末尾时，它会突然跳动，然后开始。有没有办法让我们可以在不注意的情况下循环启动？ 这是我的代码。我不想用js。我们有办法做到这一点吗？ 我不想在屏幕尺寸改变时进行更改。只是希望 .marquee-item 为 580px。

.marquee-wrapper{
  background:#2F394C;
  text-align:center;
}
.marquee-wrapper .container{
  overflow:hidden;
}
.marquee-inner span{
  display:flex;
  gap:40px;
}
.marquee-wrapper .marquee-block{
  --total-marquee-items:5;
  height: 150px;
  width: calc(30% * (var(--total-marquee-items)));
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  margin: 20px auto;
  background:#1B2531;
  padding: 30px 0;
}
.marquee-inner{
  display: flex;
  width: 200%;
  position: absolute;
}
.marquee-item{
  width: 580px;
  height: auto;
  float: left;
  transition: all .2s ease-out;
  background:#00cc00;
}
.marquee-item:last-child {
  margin: 0 50px 0 20px;
}
.marquee-inner p{
  font-weight: 800;
  font-size: 30px;
  font-family: cursive;
}
.marquee-inner.to-left{
  animation: marqueeLeft 5s linear infinite;
}
.marquee-inner.to-right{
  animation: marqueeRight 5s linear infinite;
}
@keyframes marqueeLeft{
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
@keyframes marqueeRight{
  0% { 
    left: -100%; 
  }
  100% {
   left: 0; 
  }
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Carousel</title>

</head>
<body>

<div class="marquee-wrapper">
    <div class="container">
        <div class="marquee-block">
            <div class="marquee-inner to-left">
                <span>
                    <div class="marquee-item">
                        <p class="text-white">1</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">2</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">3</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">4</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">5</p>
                    </div>
                </span>
                <span>
                    <div class="marquee-item">
                        <p class="text-white">1</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">2</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">3</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">4</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">5</p>
                    </div>
                </span>
            </div>
        </div>
        <div class="marquee-block">
            <div class="marquee-inner to-right">
                <span>
                    <div class="marquee-item">
                        <p class="text-white">5</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">4</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">3</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">2</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">1</p>
                    </div>
                </span>
                <span>
                    <div class="marquee-item">
                        <p class="text-white">5</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">4</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">3</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">2</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">1</p>
                    </div>
                </span>
            </div>
        </div>
    </div>
</div>
  
</body>
</html>

html css css-transitions
1个回答
0
投票

有两个主要问题：

  • 您在 .marquee-inner 上设置的宽度是百分比，它反映了父级的百分比。在这里，由于父级被迫使用比内容更小的尺寸，所以这不好。相反，我用一个公式替换它，以获取每个元素的宽度，加上它们的间距，并将其乘以元素的数量。
  • 动画再次使用 
    position:absolute
    与 
    left:-100%
    配对，百分比使用父级尺寸。在此示例中，您向左平移容器大小的 100%，而您想要内容大小的 100%。我使用变换有两个原因：性能（变换总是比实际更改位置更好），而且因为在其中，百分比指的是实际元素，因此 -100% 会按照您的预期工作。

现在，当动画循环时，您会看到一点闪烁。发生这种情况是因为动画的第一帧和最后一帧完全相同，因此您会看到元素好像停止了一小会儿。为了避免这个问题，您必须将一帧中行进的百分比减去 100%。当然有一些技术可以规避这个问题，但我不知道它们。

.marquee-wrapper {
  background: #2F394C;
  text-align: center;
}

.marquee-wrapper .container {
  overflow: hidden;
}

.marquee-inner span {
  display: flex;
  gap: 40px;
}

.marquee-wrapper .marquee-block {
  --total-marquee-items: 5;
  height: 150px;
  width: calc(30% * (var(--total-marquee-items)));
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  margin: 20px auto;
  background: #1B2531;
  padding: 30px 0;
}

.marquee-inner {
  display: flex;
  width: calc((580px + 40px) *( var(--total-marquee-items)) + 40px);
  position: absolute;
}

.marquee-item {
  width: 580px;
  height: auto;
  float: left;
  transition: all .2s ease-out;
  background: #00cc00;
}

.marquee-item:last-child {
  margin: 0 50px 0 20px;
}

.marquee-inner p {
  font-weight: 800;
  font-size: 30px;
  font-family: cursive;
}

.marquee-inner.to-left {
  animation: marqueeLeft 5s linear infinite;
}

.marquee-inner.to-right {
  animation: marqueeRight 5s linear infinite;
}

@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes marqueeRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Carousel</title>

</head>

<body>

  <div class="marquee-wrapper">
    <div class="container">
      <div class="marquee-block">
        <div class="marquee-inner to-left">
          <span>
                    <div class="marquee-item">
                        <p class="text-white">1</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">2</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">3</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">4</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">5</p>
                    </div>
                </span>
          <span>
                    <div class="marquee-item">
                        <p class="text-white">1</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">2</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">3</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">4</p>
                    </div>
                    <div class="marquee-item">
                        <p class="text-white">5</p>
                    </div>
                </span>
        </div>
      </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.