纯 CSS 滑块

Question

所以我开始熟悉 css3 并且我一直在尝试寻找一个纯粹的 css 滑块。我终于找到了一个与我在代码笔上寻找的完全一样的东西，但是由于某种原因，当我在 localhost 或 jsfiddle 中尝试代码时它不起作用。据我在 codepen 中可以看出，它没有可以访问的外部文件，也不需要 jQuery。下面我链接了（工作的）codepen 和 jsfiddle。任何想法为什么它不会在其他地方工作？

codepen

jsFiddle

html

<div class="slider">
  <img class='photo'  src="http://i.imgur.com/zMGSiyl.jpg" alt="" />
  <img class='photo'  src="http://i.imgur.com/soQhb13.jpg" alt="" />
  <img class='photo'  src="http://i.imgur.com/39yOaYB.jpg" alt="" />
  <img class='photo'  src="http://i.imgur.com/tnctKD4.jpg" alt="" />
</div>

css

body{background:#000;}

.slider{
  margin:50px auto;
  width:100%;
  height:300px;
  overflow:hidden;
  position:relative;

}
.photo{
  position:absolute;
  animation:round 16s infinite;
  opacity:0;
  width:100%;

}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

Answer 1

您可能需要使用特定于供应商的keyframes。 Codepen 很聪明，在这种情况下过度补偿。

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

更多信息http://css-tricks.com/snippets/css/keyframe-animation-syntax/

Answer 2

完美运行，请查看：jsFiddle Demo。代码中使用的 CSS3 动画和关键帧的语法是标准语法，例如animation:round 16s infinite;、@keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } 和 img:nth-child(4){animation-delay:0s;}。

您应该改用 -webkit-animation:round 16s infinite;`, `@-webkit-keyframes round{ 25%{opacity:1;} 40%{opacity:0;} } ` and `img:nth-child(4){-webkit-animation-delay:0s;} 以便它与浏览器兼容。

更多信息可通过here获取。

body {
  background: #000;
}
.slider {
  margin: 50px auto;
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}
.photo {
  position: absolute;
  -webkit-animation: round 16s infinite;
  -moz-animation: round 16s infinite;
  -o-animation: round 16s infinite;
  animation: round 16s infinite;
  opacity: 0;
  width: 100%;
}
@-webkit-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@-moz-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@-o-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
img:nth-child(4) {
  -webkit-animation-delay: 0s;
}
img:nth-child(3) {
  -webkit-animation-delay: 4s;
}
img:nth-child(2) {
  -webkit-animation-delay: 8s;
}
img:nth-child(1) {
  -webkit-animation-delay: 12s;
}

<div class="slider">
  <img class='photo' src="http://i.imgur.com/zMGSiyl.jpg" alt="" />
  <img class='photo' src="http://i.imgur.com/soQhb13.jpg" alt="" />
  <img class='photo' src="http://i.imgur.com/39yOaYB.jpg" alt="" />
  <img class='photo' src="http://i.imgur.com/tnctKD4.jpg" alt="" />
</div>