那些遇到过的问题

纯CSS3不断移动滑块

use*_*291 2 html css css3 css-animations

我想用CSS3(以及后来的Sass)制作不断移动的滑块.我有九个图像和掩模div宽度为850px,我知道如何为第一个图像设置动画,但是如何计算其余部分的值.

我在Smashing Magazine和hugogiraudel.com上找到了很好的教程,但是有静态状态,我不知道如何让它继续运行.

如果有人可以帮助我理解这个以及如何使用SASS,那将是很好的.

这是CodePen与我所做的.这是代码:

#slider {
  width: 850px;
  margin: 0 150px;
}
.ruler {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid black;
}
.u10 {
  flex: 1 1 0;
  width: 10%;
  text-align: center;
  z-index: 0;
}
.u10:nth-child(even) {
  background-color: white;
}
.u10:nth-child(odd) {
  background-color: gray;
}
ul {
  list-style: outside none none;
  position: relative;
  height: 100px;
}
ul:after {
  border: 1px solid black;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: "";
}
li {
  position: absolute;
}
.img1 {
  left: -120px;
}
.img2 {
  left: 0px;
}
.img3 {
  left: 120px;
}
.img4 {
  left: 240px;
}
.img5 {
  left: 360px;
}
.img6 {
  left: 480px;
}
.img7 {
  left: 600px;
}
.img8 {
  left: 720px;
}
.img9 {
  left: 840px;
}
.animation {
  animation: 10s linear 0s infinite running cycle1;
}
@keyframes cycle1 {
  0% {
    left: -120px;
    opacity: 0;
  }
  1% {
    left: -120px;
    opacity: 1;
  }
  99% {
    left: 840px;
    opacity: 1;
  }
  100% {
    left: -120px;
    opacity: 0;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div id="slider">
  <div class="ruler">
    <span class="u10">10%</span>
    <span class="u10">20%</span>
    <span class="u10">30%</span>
    <span class="u10">40%</span>
    <span class="u10">50%</span>
    <span class="u10">60%</span>
    <span class="u10">70%</span>
    <span class="u10">80%</span>
    <span class="u10">90%</span>
    <span class="u10">100%</span>
  </div>
  <ul>
    <li class="image-wrapper img1">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
  <ul>
    <li class="image-wrapper img1 animation">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>

  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

Har*_*rry 5

要制作不断移动的滑块动画,请不要为每个图像元素指定不同的位置.相反,将它们放在父元素之外的相同位置,然后给它们中的每一个逐渐不同,animation-delay如下面的代码片段所示.给每个图像元素一个不同的起始位置将意味着它们中的每一个都需要被提供不同的持续时间,因为速度必须是不同的(因为它必须从左到右覆盖的像素量将是高的).

由于有在任何时间点,总在容器内9个的图像的是,每个单独的图像元素的延迟应等于(animation-duration/9) * (n-1)其中n是否定的.元素.为简单起见,我将其修改animation-duration为9s,因此对于第一个图像,animation-delay将为0,而对于第二个图像,将为1,依此类推.

#slider {
  width: 850px;
  margin: 0 150px;
}
.ruler {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid black;
}
.u10 {
  flex: 1 1 0;
  width: 10%;
  text-align: center;
  z-index: 0;
}
.u10:nth-child(even) {
  background-color: white;
}
.u10:nth-child(odd) {
  background-color: gray;
}
ul {
  list-style: outside none none;
  position: relative;
  height: 100px;
}
ul:after {
  border: 1px solid black;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: "";
}
li {
  position: absolute;
}
.img1 {
  left: -120px;
}
.img2 {
  left: 0px;
}
.img3 {
  left: 120px;
}
.img4 {
  left: 240px;
}
.img5 {
  left: 360px;
}
.img6 {
  left: 480px;
}
.img7 {
  left: 600px;
}
.img8 {
  left: 720px;
}
.img9 {
  left: 840px;
}
.animation {
  animation: 9s linear 0s infinite running cycle1;
}
@keyframes cycle1 {
  0% {
    left: -120px;
    opacity: 0;
  }
  1% {
    left: -120px;
    opacity: 1;
  }
  99% {
    left: 850px;
    opacity: 1;
  }
  100% {
    left: -120px;
    opacity: 0;
  }
}
.animation[class*='img'] {
  left: -120px;
}
.animation.img2 {
  animation-delay: 1s;
}
.animation.img3 {
  animation-delay: 2s;
}
.animation.img4 {
  animation-delay: 3s;
}
.animation.img5 {
  animation-delay: 4s;
}
.animation.img6 {
  animation-delay: 5s;
}
.animation.img7 {
  animation-delay: 6s;
}
.animation.img8 {
  animation-delay: 7s;
}
.animation.img9 {
  animation-delay: 8s;
}
ul.overflow-hidden {
  overflow: hidden;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="slider">
  <div class="ruler">
    <span class="u10">10%</span>
    <span class="u10">20%</span>
    <span class="u10">30%</span>
    <span class="u10">40%</span>
    <span class="u10">50%</span>
    <span class="u10">60%</span>
    <span class="u10">70%</span>
    <span class="u10">80%</span>
    <span class="u10">90%</span>
    <span class="u10">100%</span>
  </div>
  <h3>Without animation</h3>
  <ul>
    <li class="image-wrapper img1">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
  <h3>With the portions outside the container visible</h3>
  <ul>
    <li class="image-wrapper img1 animation">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2 animation">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3 animation">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4 animation">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5 animation">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6 animation">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7 animation">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8 animation">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9 animation">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
  <h3>With the portions outside the container hidden</h3>
  <ul class='overflow-hidden'>
    <li class="image-wrapper img1 animation">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2 animation">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3 animation">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4 animation">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5 animation">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6 animation">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7 animation">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8 animation">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9 animation">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

如果您希望图像在开头本身的容器中可见(而不是在开始时的空容器),那么在不添加额外元素的情况下很难实现它.您可以使用与上面提到的相同的方法,添加一个额外的虚拟包装器,其中包含所有9个图像,并仅将其设置为动画一次,使其位于真实动画之前.以下代码段包含此方法的示例.

#slider {
  width: 850px;
  margin: 0 150px;
}
.ruler {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid black;
}
.u10 {
  flex: 1 1 0;
  width: 10%;
  text-align: center;
  z-index: 0;
}
.u10:nth-child(even) {
  background-color: white;
}
.u10:nth-child(odd) {
  background-color: gray;
}
ul {
  list-style: outside none none;
  position: relative;
  height: 100px;
  padding: 0px 0px;
}
ul:after {
  border: 1px solid black;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: "";
}
li {
  position: absolute;
}
.img1 {
  left: -120px;
}
.img2 {
  left: 0px;
}
.img3 {
  left: 120px;
}
.img4 {
  left: 240px;
}
.img5 {
  left: 360px;
}
.img6 {
  left: 480px;
}
.img7 {
  left: 600px;
}
.img8 {
  left: 720px;
}
.img9 {
  left: 840px;
}
.animation {
  animation: 9s linear 5s infinite running cycle1; /* small delay added for image to be loaded, this can be ignored if image is preloaded */
}
@keyframes cycle1 {
  0% {
    left: -100px;
    opacity: 0;
  }
  0.01% {
    left: -100px;
    opacity: 1;
  }
  99.99% {
    left: 854px; /* total distance to be covered to be same as width of the dummy wrapper */
    opacity: 1;
  }
  100% {
    left: -100px;
    opacity: 0;
  }
}
.animation[class*='img'] {
  left: -100px;
}
.animation.img1 {
  animation-delay: 6s;
}
.animation.img2 {
  animation-delay: 7s;
}
.animation.img3 {
  animation-delay: 8s;
}
.animation.img4 {
  animation-delay: 9s;
}
.animation.img5 {
  animation-delay: 10s;
}
.animation.img6 {
  animation-delay: 11s;
}
.animation.img7 {
  animation-delay: 12s;
}
.animation.img8 {
  animation-delay: 13s;
}
ul.overflow-hidden {
  overflow: hidden;
}
.image-dummy {
  position: absolute;
  left: -100px;
  width: 954px; /* 100px image width + 6px imaee margin * no. of images */
  animation: 9s linear dummy-move 1 forwards 5s;
  white-space: nowrap;
  margin: 0px;
}
.image-dummy img {
  float: left;
  margin-right: 6px;
}
@keyframes dummy-move {
  from {
    left: -100px;
  }
  to {
    left: 866px; /* rough calculation equal to width of container * (margin-right * 2) */
  }
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="slider">
  <div class="ruler">
    <span class="u10">10%</span>
    <span class="u10">20%</span>
    <span class="u10">30%</span>
    <span class="u10">40%</span>
    <span class="u10">50%</span>
    <span class="u10">60%</span>
    <span class="u10">70%</span>
    <span class="u10">80%</span>
    <span class="u10">90%</span>
    <span class="u10">100%</span>
  </div>
  <h3>Without animation</h3>
  <ul>
    <li class="image-wrapper img1">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
  <h3>With the portions outside the container visible</h3>
  <ul>
    <li class="image-wrapper img1 animation">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2 animation">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3 animation">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4 animation">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5 animation">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6 animation">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7 animation">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8 animation">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9 animation">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
  <h3>With the portions outside the container hidden</h3>
  <ul class='overflow-hidden'>
    <li class="image-wrapper img1 animation">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2 animation">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3 animation">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4 animation">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5 animation">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6 animation">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7 animation">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8 animation">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9 animation">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
    <li class='image-dummy'>
      <img src="http://placehold.it/100?text=9" alt="">
      <img src="http://placehold.it/100?text=8" alt="">
      <img src="http://placehold.it/100?text=7" alt="">
      <img src="http://placehold.it/100?text=6" alt="">
      <img src="http://placehold.it/100?text=5" alt="">
      <img src="http://placehold.it/100?text=4" alt="">
      <img src="http://placehold.it/100?text=3" alt="">
      <img src="http://placehold.it/100?text=2" alt="">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

这比调整您的方法产生这种效果更容易,因为您的方法需要9种不同的关键帧设置才能产生您需要的效果.

归档时间：

查看次数：

203 次

最近记录：

9 年，10 月 前
相关归档
在淘汰JS中使用keypress事件 27
chrome/safari显示图像周围的边框 22
为什么我的div高度100%仅在移除DOCTYPE时才起作用？ 21
将鼠标悬停在Safari中的CSS转换上可以减轻某些字体颜色 20
Flexbox图像缩放到高度并保持纵横比 20
(真的)长背景图像无法在iPad Safari上渲染 17
Div水平中心和垂直中间 16
是否有一个CSS选择器可以选择带有溢出文本的元素？ 9
CSS:如何定位表中的特定单元格？ 9
使用浏览器的主滚动条滚动2个DIV内容+主要内容 5
难疑归档
Python有一个字符串'contains'子串方法吗？ 3601
grep一个文件,但显示几个周围的行？ 3277
在CSS中设置cellpadding和cellspacing？ 3210
仅存储使用Git更改的多个文件中的一个文件？ 2895
如何在Python中将字符串解析为float或int？ 2108
如何格式化Microsoft JSON日期？ 1954
如何在Bash中的分隔符上拆分字符串？ 1885
如何在Python中通过索引从列表中删除元素？ 1381
如何获取所有Git分支 1371
如何使用jQuery获取元素的ID？ 1320