純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;}以便與瀏覽器兼容。

有關更多信息，請參見此處 。

 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>