CSS3 无限循环回到第一张图片 [英] CSS3 infinite loop back to first image

查看：27
本文介绍了CSS3 无限循环回到第一张图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个连续循环的 5 张图片 css3 无限滑块(这里没有涉及 jQuery 或 JS，我也不想要任何)，但是一旦最后一张图片滑入到位，它就会跳回到第一张图片.我尝试将第一张图片添加为组中的第 6 张图片，但这没有任何区别，有人可以查看我的 CSS3 计算以了解我做错了什么吗?

HTML

<图><img src="banner01.jpg" alt=""><img src="banner02.jpg" alt=""><img src="banner03.jpg" alt=""><img src="banner04.jpg" alt=""><img src="banner05.jpg" alt=""></图>

CSS3

@keyframes 滑块 {0% { 左: 0%;}20% { 左: 0%;}25% { 左:-100%;}45% { 左:-100%;}50% { 左:-200%;}70% { 左:-200%;}75% { 左:-300%;}95% { 左:-300%;}100% { 左:-400%;}}正文{边距:0；}div#slider { 溢出:隐藏；宽度:710px；高度:300px；浮动:中心；保证金:自动；}div#slider 图 img {float: left;}div#滑块图{位置:相对；高度:100%；宽度:500%；边距:0；左:0；文本对齐:左；字体大小:0；动画:30 秒滑块；过渡:.7s；}

提前致谢

解决方案

你的 100% 动画部分 - -400% 值 - 实际上只是被显示正好... 0 秒，然后它才会重新回到 0% 值.尝试添加一个间隙，使 -400% 值保持更长时间的活动状态:

@keyframes slidr {0% { 左: 0%;}20% { 左: 0%;}25% { 左:-100%;}45% { 左:-100%;}50% { 左:-200%;}70% { 左:-200%;}75% { 左:-300%;}85% { 左:-300%;}90% { 左:-400%;}100% { 左:-400%;}}/* 抱歉，我在 Safari */@-webkit-keyframes 滑块 {0% { 左: 0%;}20% { 左: 0%;}25% { 左:-100%;}45% { 左:-100%;}50% { 左:-200%;}70% { 左:-200%;}75% { 左:-300%;}85% { 左:-300%;}90% { 左:-400%;}100% { 左:-400%;}}身体 {边距:0；}div#滑块{溢出:隐藏；宽度:710px；高度:300px；/* 我不认为这实际上是一件事:*/浮动:中心；保证金:自动；}div#slider 图 img {向左飘浮;}div#滑块图{位置:绝对；高度:100%；宽度:500%；边距:0；左:0；文本对齐:左；字体大小:0；/* 再说一次，我在 Safari 上.此外，为了开发目的，加快速度.*/-webkit-animation: 10s slidr 无限；动画:10s 滑动无限；过渡:.7s；}图像{宽度:100vw；高度:400px；}

<图><img src="http://placehold.it/350x150" alt=""><img src="http://placehold.it/350x150" alt=""><img src="http://placehold.it/350x150" alt=""><img src="http://placehold.it/350x150" alt=""><img src="http://placehold.it/350x150" alt=""></图>

请注意，它实际上捕捉回 0 而不是动画.您可以再次创建过渡 - 如果您愿意的话 - 通过添加另一个将左侧值恢复为 0% 的间隙.

更新以返回开始

要返回开始，只需确保:

  • 不同步骤的总和等于frames + 1
  • 最后一步和第一步从 0
    • 开始

在 SASS 中，我们可以轻松地自动执行此过程:

@mixin keyframes-slider($name, $frames){//创建关键帧包装器@keyframes #{$name} {//遍历帧数 (-1)@for $i 从 0 到 ($frames - 1) {//将 100% 除以帧数//第一帧为0，最后一帧归0#{100%/$frames * $i} { left: -100% * $i;}}//添加最后一帧100% { 左:0;}}}

只需通过包含它来使用它，它就会生成您想要的关键帧:

@include keyframes-slider(slidr, 8);

举个例子(用 8 预生成):

/* 下面是我压缩的 SASS 输出.*/@-webkit-keyframes 滑动{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}@keyframes slidr{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}/* 这是给出一个好的例子的快速方法.*/ul{宽度:800px；高度:100px；填充:0；边距:0；列表样式:无；-webkit-animation:slidr 10s 无限；动画:slidr 10s 无限；位置:绝对；左:0；顶部:0；}div, li {宽度:100px；高度:100px；向左飘浮;字体大小:30px；背景:#ececec；}li:nth-child(2n){背景:#dd0300；}div {位置:相对；溢出:隐藏；}

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>

I have a 5 image css3 infinite slider which is on a continuous loop (there is no jQuery or JS involved here and I don't want any either), however as soon as the last image has slid into position it jumps back to the first image. I have tried adding the first image as the 6th image in the group but this hasn't made any difference, can someone look over my CSS3 calculations to see what I'm doing wrong?

HTML

<div id="slider">
<figure>
        <img src="banner01.jpg" alt="">
        <img src="banner02.jpg" alt="">
        <img src="banner03.jpg" alt="">
        <img src="banner04.jpg" alt="">
        <img src="banner05.jpg" alt="">

</figure>
</div>

CSS3

@keyframes slidr {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; width:710px; height:300px; float:center; margin:auto; }
div#slider figure img {float: left; }
div#slider figure { 
  position: relative;
  height:100%;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidr; 
  transition:.7s;
}

Thanks in advance

解决方案

Your 100% part of the animation - the -400% value - is actually only being displayed for exactly... 0 seconds before it gets rewound to the 0% value. Try adding a gap that keep the -400% value active for longer:

@keyframes slidr {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  85% { left: -300%; }
  90% { left: -400%; }
  100% { left: -400%; }
}

/* Sorry, I'm on Safari */
@-webkit-keyframes slidr {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  85% { left: -300%; }
  90% { left: -400%; }
  100% { left: -400%; }
}

body { 
  margin: 0; 
} 
div#slider { 
  overflow: hidden; 
  width:710px; 
  height:300px; 
  /* I dont think this is actually a thing: */
  float:center; 
  margin:auto; 
}
div#slider figure img {
    float: left;
}
div#slider figure { 
  position: absolute;
  height:100%;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  /* And again, I'm on Safari. Also, speed it up for development purposes. */
  -webkit-animation: 10s slidr infinite; 
  animation: 10s slidr infinite; 
  transition:.7s;
}

img {
  width: 100vw;
  height: 400px;
}

<div id="slider">
<figure>
        <img src="http://placehold.it/350x150" alt="">
        <img src="http://placehold.it/350x150" alt="">
        <img src="http://placehold.it/350x150" alt="">
        <img src="http://placehold.it/350x150" alt="">
        <img src="http://placehold.it/350x150" alt="">

</figure>
</div>

Notice that it actually snaps back to 0 and not animates. You could create a transition again - if you want to - by adding another gap that restores the left value to 0%.

Update to return to start

To return to start, just make sure that:

  • The total of different steps equals the amount of frames + 1
  • The last and first step start at 0

In SASS we could easily automate this process:

@mixin keyframes-slider($name, $frames){
    // Create keyframes wrapper
    @keyframes #{$name} {
        // Loop through the amount of frames (-1)
        @for $i from 0 through ($frames - 1) {
            // Divide the 100% by the amount of frames
            // The first frame is 0, and the last will return to 0
            #{100% / $frames * $i} { left: -100% * $i; }
        }
        // Add the final frame
        100% { left: 0; }
    }
}

Simply use it by including it and it will generate the keyframes you want:

@include keyframes-slider(slidr, 8);

As an example (pre-generated with 8):

/* Thos following is my compressed SASS output. */
@-webkit-keyframes slidr{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}@keyframes slidr{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}

/* This is a quick way to give a good example. */
ul {
  width: 800px;
  height: 100px;
  padding: 0;
  margin: 0;
  list-style: none;
  -webkit-animation: slidr 10s infinite;
  animation: slidr 10s infinite;
  position: absolute;
  left: 0;
  top: 0;
}
div, li {
  width: 100px;
  height: 100px;
  float: left;
  font-size: 30px;
  background: #ececec;
}
li:nth-child(2n){
  background: #dd0300;
}
div {
  position: relative;
   overflow: hidden; 
}

<div>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
</div>

这篇关于CSS3 无限循环回到第一张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆