Question

我有一个5条带，全宽度为20％，背景颜色各不相同，我希望以这种方式设置动画： 1）所有条带从左向右移动， 2）在^动画之后我想继续移动这个像“marquee”的情况但我想避免空白和重复后的故障（类似于无限水平滚动）。

我尝试使用http://aamirafridi.com/jquery/jquery-marquee-plugin#examples插件，但由于宽度和背景颜色不同，它在这种情况下效果不佳。

也许有办法使用纯CSS3？这是我的草图：http://jsfiddle.net/sbgrhtqv/

<div class="strips">
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
</div>

.strips {
    width:100%;
    -webkit-animation-name: slide;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
}

.strip {
    height: 5px;
    width:20%;
    float: left;
}
.strip:nth-child(1) {background: red;}
.strip:nth-child(2) {background: purple;}
.strip:nth-child(3) {background: grey;}
.strip:nth-child(4) {background: green;}
.strip:nth-child(5) {background: blue;}

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

你有解决方案吗？我会很高兴:)）

Answer 1

要使动画无限，您需要复制条带，因为它们不能向右消失并同时填充左侧的空白区域。我还添加了一个容器来隐藏溢出而不是无限的水平滚动：

#container {
    position: relative;
    overflow: hidden;
    width: 100%; height: 5px;
}

.strips {
    position: absolute; left: -100%; top: 0;
    width: 200%; height: 100%;
    -webkit-animation: slide 4s linear infinite;
    -moz-animation:    slide 4s linear infinite;
    animation:         slide 4s linear infinite;
}

.strip { height: 5px; width: 10%; float: left; }

.strip:nth-child(1), .strip:nth-child(6) { background: red;    }
.strip:nth-child(2), .strip:nth-child(7) { background: purple; }
.strip:nth-child(3), .strip:nth-child(8) { background: grey;   }
.strip:nth-child(4), .strip:nth-child(9) { background: green;  }
.strip:nth-child(5), .strip:nth-child(10){ background: blue;   }

@-webkit-keyframes slide {
    0%   { -webkit-transform: translateX(0);   }
    100% { -webkit-transform: translateX(50%); }
}
@-moz-keyframes slide {
    0%   { -moz-transform: translateX(0);   }
    100% { -moz-transform: translateX(50%); }
}
@keyframes slide {
    0%   { transform: translateX(0);   }
    100% { transform: translateX(50%); }
}

<div id="container">
    <div class="strips">
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
        <div class="strip"></div>
    </div>
</div>

强制％宽度的条带移动，如在选框中没有空格

1 个答案: