代码之家 › 专栏 › 技术社区 › Ariel

css中的图像滑块关键帧

keyframe css html

Ariel · 技术社区 · 8 年前

这是我在幻灯片中的css

    .slideshow figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 10s slidey infinite; }

@keyframes slidey {
    0% { left: 0%;}
10% { left: 0%;}
20% { left: -100%; }
30% { left: -100%;}
40% {  left: -200%;}
50% { left: -200%;}
60% {  left: -300%; }
80% {   left: -300%;}
100% {   left: 0%;} }

我的问题是,如何使图像滑块循环回到第一张图片,而不返回到以前的图片

2 回复 | 直到 8 年前

Farhad Bagherlo 8 年前

div {
    width: 200px;
    height: 200px;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 10s infinite;
    background-size: 200px 200px;
    background-repeat: no-repeat;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    0%   {opacity: 0;}
    25%  {opacity: 1;  background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjOqKI0kZG7nIV2w7AFRWfPUGiqeM0J26TbCp8irR1jZiNG556);}
    50%  {opacity: 0; }
    75%  {opacity: 1; background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREaFRkgZSFrksv7yCBWBpfCBE7_VOVmA3ORqy5mPxAUn2BAJIW);}
    100% {opacity: 0;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {opacity: 0;}
    25%  {opacity: 1;  background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjOqKI0kZG7nIV2w7AFRWfPUGiqeM0J26TbCp8irR1jZiNG556);}
    50%  {opacity: 0; }
    75%  {opacity: 1; background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREaFRkgZSFrksv7yCBWBpfCBE7_VOVmA3ORqy5mPxAUn2BAJIW);}
    100% {opacity: 0;}
}

<div></div>

FilmFiddler 8 年前

这里有一种方法可以平滑地继续从最后一个图像滑动到第一个图像的方向(并无限重复)。与不透明动画不同,需要一个额外的桥接图像来在每组显示之间“链接”最后一个第一个动画。否则,要么在图像集之间显示空白帧,要么图像托盘向后飞到第一个图像。鉴于重复的第一幅图像,必须设置动画目标和时间。

关键帧表明该集中有3个图像。这使得一个包含4个图像的“托盘”(第一个图像重复),总宽度设置为400%。然后将“viewbox”DIV元素设置为图像的本机大小,溢出:隐藏。对于动画参数,需要进行以下工作:

.slideshow {
  position: relative;
  overflow: hidden;
  /* 'viewbox' - set size below to match native image height & width */
  width: 400px; height: 300px;
}
figure img {
  float: left; 
}
figure {
  position: absolute;
  /* 3 images in set + repeated first image = 4 x 100% */
  width: 400%; 
  margin: 0;
  -webkit-animation: slidey 10s infinite;
  animation: slidey 10s infinite;
}

@-webkit-keyframes slidey {
  0%  { transform: translateX(0%); }
  25% { transform: translateX(0%); }
  33% { transform: translateX(-25%); }
  58% { transform: translateX(-25%); }
  66% { transform: translateX(-50%); }
  91% { transform: translateX(-50%); }
  100%{ transform: translateX(-75%); }
}

@keyframes slidey {
  0%  { transform: translateX(0%); }
  25% { transform: translateX(0%); }

  33% { transform: translateX(-25%); }
  58% { transform: translateX(-25%); }

  66% { transform: translateX(-50%); }
  91% { transform: translateX(-50%); }
  /* Sliding animation of last image back to first image here 
     Then the tray resets to 0% X position at new zero time 
       to show first image statically again */
  100%{ transform: translateX(-75%); }
}

<div class="slideshow">
  <figure>
    <img src="pic1.jpg" alt="Pic1">
    <img src="pic2.jpg" alt="Pic2">
    <img src="pic3.jpg" alt="Pic3">
    <!-- repeated first image to enable chaining of first & last images -->
    <img src="pic1.jpg" alt="Pic1">
  </figure>
</div>