Question

我试图让css幻灯片显示工作，我不明白为什么不是。错误在关键帧中。我试图让图像从顶部遮罩下来，然后一旦隐藏，之前的图像将重新进入遮罩。这仅适用于关键帧1和2.我不明白为什么。我的课程截止日期很快，请帮助！

CSS代码：

#content {
    background-color: white;
    /* border: 1px solid black; */
    padding: 0;
    width: 100%;
    -webkit-box-shadow: 0px 0px 30px 4px #acafb3;
    -moz-box-shadow: 0px 0px 30px 4px #acafb3;
    box-shadow: 0px 0px 30px 4px #acafb3;
    }

    #slider {
        background-image: url('images/ssgbritain.jpg');
        border: 5px solid #eaeaea;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
        height: 265px;
        width: 998px;
        overflow: visible;
        position: relative;
    }
    #fig-container {
        margin:0;
        padding:0;
        position:relative;
    }
    #mask {
        overflow: hidden;
        height: 270px;
    }
    #slider figure {
        width: 998px;
        /* Width Image */
        height: 265px;
        /* Height Image */
        position: absolute;
        top: -270px;
        /* Original Position - Outside of the Slider */
    }
    figure:nth-child(1) {
        animation:cycle 25s linear infinite;
        -moz-animation:cycle 25s linear infinite;
        -webkit-animation:cycle 25s linear infinite;
    }
    figure:nth-child(2) {
        animation:cycle2 25s linear infinite;
        -moz-animation:cycle2 25s linear infinite;
        -webkit-animation:cycle2 25s linear infinite;
    }
    figure:nth-child(3) {
        animation:cycle3 25s linear infinite;
        -moz-animation:cycle3 25s linear infinite;
        -webkit-animation:cycle3 25s linear infinite;
    }
    figure:nth-child(4) {
        animation:cycle4 25s linear infinite;
        -moz-animation:cycle4 25s linear infinite;
        -webkit-animation:cycle4 25s linear infinite;
    }
    figure:nth-child(5) {
        animation:cycle5 25s linear infinite;
        -moz-animation:cycle5 25s linear infinite;
        -webkit-animation:cycle5 25s linear infinite;
    }
    @keyframes cycle {
        0% {
            top: 0px;
        }
        25% {
            top: 0px;
        }
        26% {
            top: -270px;
        }
        96% {
            top: -270px;
        }
        100% {
            top: 0px;
        }
    }
    @-webkit-keyframes cycle {
        0% {
            top: 0px;
        }
        4% {
            top: 0px;
        }
        25% {
            top: 0px;
        }
        26% {
            top: -270px;
        }
        96% {
            top: -270px;
        }
        100% {
            top: 0px;
        }
    }
    @keyframes cycle2 {
        0% {
            top: -270px;
        }
        20% {
            top: -270px;
        }
        24% {
            top: 0px;
        }
        41% {
            top: 0px;
        }
        42% {
            top: -270px;
        }
        100% {
            top: -270px;
        }
    }
    @-webkit-keyframes cycle2 {
        0% {
            top: -270px;
        }
        20% {
            top: -270px;
        }
        24% {
            top: 0px;
        }
        41% {
            top: 0px;
        }
        42% {
            top: -270px;
        }
        100% {
            top: -270px;
        }
  @keyframes cycle3 {
        0% {
            top: -270px;
        }
        36% {
            top: -270px;
        }
        40% {
            top: 0px;
        }
        61% {
            top: 0px;
        }
        62% {
            top: -270px;
        }
        100% {
            top: -270px;
        }
    }
    @-webkit-keyframes cycle3 {
    0% {
        top: -270px;
    }
    36% {
        top: -270px;
    }
    40% {
        top: 0px;
    }
    61% {
        top: 0px;
    }
    62% {
        top: -270px;
    }
    100% {
        top: -270px;
    }
    @keyframes cycle4 {
        0% {
            top: -270px;
        }
        52% {
            top: -270px;
        }
        56% {
            top: 0px;
        }
        81% {
            top: 0px;
        }
        82% {
            top: -270px;
        }
        100% {
            top: -270px;
        }
    }
    @-webkit-keyframes cycle4 {
        0% {
            top: -270px;
        }
        56% {
            top: -270px;
        }
        60% {
            top: 0px;
        }
        81% {
            top: 0px;
        }
        82% {
            top: -270px;
        }
        100% {
            top: -270px;
        }
    }
    @keyframes cycle5 {
        0% {
            top: -270px;
        }
        68% {
            top: -270px;
        }
        72% {
            top: 0px;
        }
        100% {
            top: 0px;
        }
    }
    @-webkit-keyframes cycle5 {
        0% {
            top: -270px;
        }
        76% {
            top: -270px;
        }
        80% {
            top: 0px;
        }
        92% {
            top: 0px;
        }
        96 % {
            top: -270px;
        }
        100% {
            top: -270px;
        }
    }`

HTML code：

<div id="content">
    <div id="slider">
        <div id="mask">
            <div id="fig-container">
                <figure>
                    <img src="http://coursework/web/images/shopping.jpg" alt="Shopping centre" />
                    <figcaption>rger</figcaption>
                </figure>
                <figure>
                    <img src="http://coursework/web/images/ssgbritain.jpg" alt="SS Great Britain" />
                    <figcaption>rger</figcaption>
                </figure>
                <figure>
                    <img src="http://coursework/web/images/susbridge.jpg" alt="Suspension Bridge" />
                    <figcaption>rger</figcaption>
                </figure>
                <figure>
                    <img src="http://coursework/web/images/xmasmarket.jpg" alt="Suspension Bridge" />
                    <figcaption>rger</figcaption>
                </figure>
             </div>
        </div>
  </div>

P.s忽略了图像的错误定位，似乎只是像jsfiddle那样。

Answer 1

选中此fiddle

你的css有错误!!就这么简单，只要检查一下你就会弄明白。

@ - webkit-keyframes cycle3永远不会关闭！

@keyframes cycle {
    0% {
        top: 0px;
    }
    25% {
        top: 0px;
    }
    26% {
        top: -270px;
    }
    96% {
        top: -270px;
    }
    100% {
        top: 0px;
    }
}
@-webkit-keyframes cycle {
    0% {
        top: 0px;
    }
    4% {
        top: 0px;
    }
    25% {
        top: 0px;
    }
    26% {
        top: -270px;
    }
    96% {
        top: -270px;
    }
    100% {
        top: 0px;
    }
}
@keyframes cycle2 {
    0% {
        top: -270px;
    }
    20% {
        top: -270px;
    }
    24% {
        top: 0px;
    }
    41% {
        top: 0px;
    }
    42% {
        top: -270px;
    }
    100% {
        top: -270px;
    }
}
@-webkit-keyframes cycle2 {
    0% {
        top: -270px;
    }
    20% {
        top: -270px;
    }
    24% {
        top: 0px;
    }
    41% {
        top: 0px;
    }
    42% {
        top: -270px;
    }
    100% {
        top: -270px;
    }
}
@keyframes cycle3 {
    0% {
        top: -270px;
    }
    36% {
        top: -270px;
    }
    40% {
        top: 0px;
    }
    61% {
        top: 0px;
    }
    62% {
        top: -270px;
    }
    100% {
        top: -270px;
    }
}
@-webkit-keyframes cycle3 {
    0% {
        top: -270px;
    }
    36% {
        top: -270px;
    }
    40% {
        top: 0px;
    }
    61% {
        top: 0px;
    }
    62% {
        top: -270px;
    }
    100% {
        top: -270px;
    }
}
@keyframes cycle4 {
    0% {
        top: -270px;
    }
    52% {
        top: -270px;
    }
    56% {
        top: 0px;
    }
    81% {
        top: 0px;
    }
    82% {
        top: -270px;
    }
    100% {
        top: -270px;
    }
}
@-webkit-keyframes cycle4 {
    0% {
        top: -270px;
    }
    56% {
        top: -270px;
    }
    60% {
        top: 0px;
    }
    81% {
        top: 0px;
    }
    82% {
        top: -270px;
    }
    100% {
        top: -270px;
    }
}
@keyframes cycle5 {
    0% {
        top: -270px;
    }
    68% {
        top: -270px;
    }
    72% {
        top: 0px;
    }
    100% {
        top: 0px;
    }
}
@-webkit-keyframes cycle5 {
    0% {
        top: -270px;
    }
    76% {
        top: -270px;
    }
    80% {
        top: 0px;
    }
    92% {
        top: 0px;
    }
    96% {
        top: -270px;
    }
    100% {
        top: -270px;
    }
}

CSS Keyframe无法使用CSS图像幻灯片显示

1 个答案: