平滑无限滚动横幅[仅限CSS] [英] Smooth Infinite Scrolling Banner [CSS Only]

查看：177
本文介绍了平滑无限滚动横幅[仅限CSS]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

希望优化这种无限滚动效果，但是我不完全确定如何在循环回原始图像时创建平滑过渡。在10秒，它几乎不明显，但是在30秒更明显。我假设它与结束位置边距有关，但不能精确定位。最后一帧的价值应该是什么？



JSFiddle



HTML：

 < div class = container> 
< div class =photobanner> 
< img class =firstsrc =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 =secondsrc =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 =firstsrc =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：

 code> .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）; 
} 
 / *关键帧动画* / 
 .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; 
动画：bannermove 30s linear infinite; 
} 
 
 @keyframesbannermove{
 0％{margin-left：0px;} 
 100％{margin-left：-2125px;} 
} 
 
 @ -moz-keyframes bannermove {
 0％{margin-left：0px;} 
 100％{margin-left：-2125px;} 
} 
 
 @ -webkit-keyframesbannermove{
 0％{margin-left：0px;} 
 100％{margin-left：-2125px;} 
} 
 
 @ -ms-keyframesbannermove{
 0％{margin-left：0px;} 
 100％{margin-left：-2125px;} 
} 
 
 @ -o-keyframesbannermove{
 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; 
动画：bannermoves 30s linear infinite; 
} 
 
 @keyframesbannermoves{
 0％{margin-left：-2125px;} 
 100％{margin-left：0px;} 
} 
 
 @ -moz-keyframes bannermoves {
 0％{margin-left：-2125px;} 
 100％{margin-left：0px;} 
} 
 
 @ -webkit-keyframesbannermoves{
 0％{margin-left：-2125px;} 
 100％{margin-left：0px;} 
} 
 
 @ -ms-keyframesbannermoves{
 0％{margin-left：-2125px;} 
 100％{margin-left：0px;} 
} 
 
 @ -o-keyframesbannermoves{
 0％{margin-left：-2125px;} 
 100％{margin-left：0px;} 
}


解决方案

href =https://jsfiddle.net/sergdenisov/wb28eeh2/3/ =nofollow> https://jsfiddle.net/sergdenisov/wb28eeh2/3/ 。



图片之间有不必要的空格（因为 display：inline ，请阅读这篇文章 - https://css-tricks.com/fighting-the-space-between-inline-block-elements/ ）。我设置：

  .photobanner，.photobanner2 {
 font-size：0 
} $ b $然后我删除 padding-right：2px 并设置：  
  .photobanner img，.photobanner2 img {
 margin-right：5px; 
} 
  
 2  img 标签为 6px ，现在为 5px 。
 
 
 
现在我们可以计算动画所需的 margin-left ：6 x（350 + 5）=  2130px 。就是这样。
 
Looking to optimize this infinite scrolling effect, however I'm not entirely sure how to create a smooth transition when looping back to the original image. At 10s it's hardly noticeable, however at 30s it's more evident. I'm assuming it has something to do with the ending position margin, but can't quite pinpoint it. What should the value of the last frame be?



JSFiddle



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;}
}



 解决方案 
Check this out: https://jsfiddle.net/sergdenisov/wb28eeh2/3/.



You had unnecessary space between images (cause display: inline, read this article — https://css-tricks.com/fighting-the-space-between-inline-block-elements/). I set:
.photobanner, .photobanner2 {
    font-size: 0
}

Then I remove padding-right: 2px and set:
.photobanner img, .photobanner2 img {
    margin-right: 5px;
}

Really space between 2 img tags was 6px, now it's 5px.



Now we can calculate required margin-left for animation: 6 x (350 + 5) = 2130px. That's it.


                        
这篇关于平滑无限滚动横幅[仅限CSS]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆