css - 仅使用 css 在滚动幻灯片横幅中无缝循环图像

标签 css scroll css-animations slideshow

我得到了一个 css 滚动幻灯片的代码，在 Naren Murali 的帮助下，我能够修改我的 14 张图片，基于仅使用 6 张的演示。但是，唯一的问题是我不知道如何修改关键帧动画，使第一张和最后一张图像相同，从而实现从节目结束到下一次迭代的无缝过渡。

如果有人能向我解释如何实现这一点，我将不胜感激。

谢谢。

    html {
        background-color: white;
        }
    body {
        width: 1300px;
    	margin: 0 auto 0;
        }
    #container {
    	width: 500px;
    	overflow: hidden;
    	margin: 50px auto;
    	background: white;
    }
    .photobanner {
        height: 270px;
        width: 6748px;
        margin-bottom: 80px;
        font-size:0px;
    }
    img{
      margin-right:2px;
    }
    .flex-container {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin-top: 30px;
        }
    .first {
    	-webkit-animation: bannermove 60s linear infinite;
    	   -moz-animation: bannermove 60s linear infinite;
    	    -ms-animation: bannermove 60s linear infinite;
    	     -o-animation: bannermove 60s linear infinite;
    	        animation: bannermove 60s linear infinite;
    }
    @keyframes "bannermove" {
     0% {
        margin-left: 0px;
     }
     100% {
        margin-left: -6268px;
     }
    }
    @-moz-keyframes bannermove {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -6268px;
     }
    }
    @-webkit-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -6268px;
     }
    }
    @-ms-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -6268px;
     }
    }
    @-o-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -6268px;
     }
    }
    img{
      margin-right:2px;
    }
    <header>
    </header>
    <section class="flex-container">
        <div id="container">
         <!-- Each image is 480px by 270px -->
        <div class="photobanner">
        	<img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_stars.jpg" alt="network reality all stars" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" />
    </div>
        </div>
     </section>

最佳答案

我回到演示并弄明白了。我在 14 个完整周期后重复了前 4 张图像。我制作了 .container 1000px 宽和 .photobanner 8640px 宽(480px(图像宽度)x 18)。然后我将边距设置为负值以将图像行向左移动足够远，以便第一张图像的第二次迭代占据初始位置。由于在演示中这个数字是 -2125，每张图像的宽度为 350px，而 2125/350 = 6 是离散图像的数量，我将 14 张离散图像乘以 480 = 6720。这几乎对齐但需要调整。左边距为 -6745，运行非常流畅。

<!DOCTYPE HTML>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    }
.flex-container_1 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 1200px;
    justify-content: center;
    margin: 0 auto 0;
    }
.container {
    width: 1000px;
    overflow: hidden;
    margin: 50px auto;
    background: white;
    }
.photobanner {
    display: flex;
    flex-wrap: nowrap;
    height: 270px;
    width: 8640px;
    margin-bottom: 20px;
    font-size:0px;
}
img{
  margin-right:2px;
}
.first {
    -webkit-animation: bannermove 60s linear infinite;
       -moz-animation: bannermove 60s linear infinite;
        -ms-animation: bannermove 60s linear infinite;
         -o-animation: bannermove 60s linear infinite;
            animation: bannermove 60s linear infinite;
}
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -6745px;
 }
}
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6745px;
 }
}
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6745px;
 }
}
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6745px;
 }
}
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -6745px;
 }
}
img{
  margin-right:2px;
}
</style>
</head>
<section class="flex-container_1">
    <div class="container">
     <!-- Each image is 480px by 270px -->
     <div class="photobanner">
            <img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_stars.jpg" alt="network reality all stars" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" />
<img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
            <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
    </div>
        <p>film stills from "wall cuts, train stations, New York City" &#40;2016&#41;</p>
    </div>
      </section>
</html>

关于css - 仅使用 css 在滚动幻灯片横幅中无缝循环图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46518710/

上一篇：CSS:无法在 div 中更改 css 类

下一篇：html - 奇怪的 float <li> 结果

相关文章：

c# - WinForm无法滚动到底部

javascript - jQuery scrollTo - 在窗口中垂直居中 Div

css - 在 nth-child/CSS3 结束时停止动画

javascript - 如何通过单击时的成帧器运动来制作菜单动画？

html - SVG圆圈动画问题

javascript - PHTML 文件中的 VS 代码 Intellisense 支持内联 css/内联 javascript

javascript - 弹出模态窗体

html - 在页眉上方留出宽阔的空间

html - 试图让页面布局与谷歌移动友好测试一起工作

css - IE 中的奇怪滚动行为与可滚动 div 中的复选框

©2024 IT工具网  联系我们