[英]Pure CSS Slider
因此,我逐渐熟悉css3,并且一直在尝试找到一个纯粹的css滑块。 我终于找到了一个与我在代码笔上寻找的完全相同的代码,但是由于某种原因,当我在localhost或jsfiddle中尝试代码时,它不起作用。 据我所知,在Codepen中没有可访问的外部文件,也不需要jQuery。 在下面,我链接了(工作中的)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;}
您可能需要使用供应商特定的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/
这非常有效,请检查: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.