Question

想要优化这种无限滚动效果，但我并不完全确定在循环回原始图像时如何创建平滑过渡。在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">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
        <img src="http://placehold.it/350x150">
    </div>
</div>

CSS：

.container {
    width: 100%;
    overflow: hidden;
    margin: 10px auto;
    background: white;
}

.photobanner, .photobanner2 {
    height: 233px;
    width: 3550px;
}

.photobanner img, .photobanner2 img {
    padding-right: 10px;
    height: 233px;
    width: 350px;
}

.photobanner img  {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.photobanner img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    cursor: pointer;

    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
    -webkit-animation: bannermove 30s linear infinite;
       -moz-animation: bannermove 30s linear infinite;
        -ms-animation: bannermove 30s linear infinite;
         -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2125px;}
}

@-moz-keyframes bannermove {
 0% {margin-left: 0px;}
 100% {margin-left: -2125px;}
}

@-webkit-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2125px;}
}

@-ms-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2125px;}
}

@-o-keyframes "bannermove" {
 0% {margin-left: 0px;}
 100% {margin-left: -2125px;}
}

.second {
    -webkit-animation: bannermoves 30s linear infinite;
       -moz-animation: bannermoves 30s linear infinite;
        -ms-animation: bannermoves 30s linear infinite;
         -o-animation: bannermoves 30s linear infinite;
            animation: bannermoves 30s linear infinite;
}

@keyframes "bannermoves" {
 0% {margin-left: -2125px;}
 100% {margin-left: 0px;}
}

@-moz-keyframes bannermoves {
 0% {margin-left: -2125px;}
 100% {margin-left: 0px;}
}

@-webkit-keyframes "bannermoves" {
 0% {margin-left: -2125px;}
 100% {margin-left: 0px;}
}

@-ms-keyframes "bannermoves" {
 0% {margin-left: -2125px;}
 100% {margin-left: 0px;}
}

@-o-keyframes "bannermoves" {
 0% {margin-left: -2125px;}
 100% {margin-left: 0px;}
}

Answer 1

检查出来：https://jsfiddle.net/sergdenisov/wb28eeh2/3/。

图片之间有不必要的空间（原因<section-> and <Control->，请阅读本文 - https://css-tricks.com/fighting-the-space-between-inline-block-elements/）。我设置：

display: inline

然后我删除.photobanner, .photobanner2 { font-size: 0 }并设置：

padding-right: 2px

2 .photobanner img, .photobanner2 img { margin-right: 5px; }个代码之间的空间真是img，现在是6px。

现在我们可以计算动画所需的5px：6 x（350 + 5）= margin-left。就是这样。

平滑无限滚动横幅[仅限CSS]

1 个答案: