Question

为什么我的CSS滑块不起作用？

我正在尝试制作CSS内容滑块，但我陷入困境。我无法找到它没有通过第一张照片的原因。动画可能有问题。

顺便说一下我使用chrome。

滑块代码的CSS如下：

.slider {
overflow: hidden;
height: 250px;
}

.slider figure div {
    width: 20%;
    float: left;
}

.slider figure img {
    width: 100%;
    float: left;
}

.slider figure {
    position: relative;
    width: 500%;
    left: 0px;
    margin: 0;
    animation: 20s slideri infinite;
}

@keyframes slideri {
0% {
    left;
    0%;
}

10% {
    left;
    0%;
}

12% {
    left;
    -100%;
}

22% {
    left;
    -100%;
}

24% {
    left;
    -200%;
}

34% {
    left;
    -200%;
}

36% {
    left;
    -300%;
}

46% {
    left;
    -300%;
}

48% {
    left;
    -400%;
}

58% {
    left;
    -400%;
}

60% {
    left;
    -300%;
}

70% {
    left;
    -300%;
}

72% {
    left;
    -200%;
}

82% {
    left;
    -200%;
}

84% {
    left;
    -100%;
}

94% {
    left;
    -100%;
}

96% {
    left;
    0%;
}
}

HTML部分是：

<div>
        <div class="slider">
            <figure>
                <div class="slide">
                    <img src="kuva_1.jpg">
                </div>
                <div class="slide">
                    <img src="kuva_2.jpg">
                </div>
                <div class="slide">
                    <img src="kuva_3.jpg">
                </div>
                <div class="slide">
                    <img src="kuva_4.jpg">
                </div>
                <div class="slide">
                    <img src="kuva-5.jpg">
                </div>
            </figure>
        </div>
    </div>

Answer 1

您使用;代替:作为关键帧。

@keyframes slideri {
    0%{left; 0%;} 
    /* ... */ 
}

应该成为

@keyframes slideri {
    0%{left: 0%;} 
    /* ... */ 
}

JSFiddle上的例子。

我的css滑块不起作用

1 个答案: