Question

我按照CSS幻灯片的教程进行了操作。它在codepen上的演示中非常完美，但是当我在网站上试用它时它似乎不起作用。可能是该网站尚未上线吗？或者这真的很愚蠢？

<div class="css-slideshow grid_6">
    <figure>
        <img src="http://v3.img.bostitch.eu/products/tools/ms-3219-e.jpg" alt="class-header-css3" width="250" height="250" class="alignnone size-full wp-image-172" />      
    </figure>
    <figure>
        <img src="http://v3.img.bostitch.eu/products/gallery/ms-series-%28app1%29.jpg" alt="class-header-semantics" width="250" height="250" class="alignnone size-full wp-image-179" />
    </figure>
</div>



.css-slideshow{position: relative;
     max-width: 250px;
     height: 250px;
}
.css-slideshow figure{
     margin: 0;
     max-width: 250px;
     height: 250px;
     background: #000;
     position: absolute;
}
.css-slideshow img{
     box-shadow: 0 0 2px #666;
}
.css-slideshow:hover figure figcaption{
     transition: opacity .5s;
     opacity: 1;
}
.css-slideshow-attr{
     max-width: 495px;
     text-align: right;
     font-size: .7em;
     font-style: italic;
     margin:0 auto;
}
.css-slideshow-attr a{
     color: #666;
}
.css-slideshow figure{
     opacity:0;
}
figure:nth-child(1) {
     animation: xfade 12s 6s infinite;
}
figure:nth-child(2) {
     animation: xfade 6s 0s infinite;
}

Answer 1

这不是因为网站不存在，但是对于开始你还没有定义xfade，它会是这样的：

@keyframes xfade{
  20% {
    opacity:1;
  }
  50% {
    opacity:0.5;
  }
  70% {
    opacity:0;
  }
}

取决于你想要什么，在这里获得帮助的最好方法是创建一个jsfiddle：http://jsfiddle.net/

为什么我的CSS幻灯片显示不起作用？

1 个答案: