純CSS滑塊

所以我熟悉css3，我一直在試圖找到一個純CSS的滑塊。我終於找到一個完全按照我在代碼筆上查找的內容，但由於某種原因，當我在localhost或jsfiddle中嘗試代碼時，它不起作用。沒有外部文件可以訪問，只要我可以在codepen中看到，並且不需要jQuery。下面我鏈接了（工作）codepen和jsfiddle。任何想法爲什麼它不會在別處工作？純CSS滑塊

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;}

來源

2014-10-29 GoldCoin

這工作perfe請檢查：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>

來源

2014-10-29 20:29:08

可以嘗試回答這個問題？ http://stackoverflow.com/questions/41518770/anchor-tag-click-not-working-in-css-slider – uncivilized 2017-01-09 05:28:14

您可能需要使用特定的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; } 
}

來源

2014-10-29 20:32:09 Vector

回答

相關問題