Question

任何人都可以给我一个关于如何降低幻灯片显示速度的解决方案吗？

我遵循以下代码：http://tympanus.net/TipsTricks/FastHoverSlideshow/

这有一个css滑块属性。我已经尝试更改animation duration的{{1}}属性，但是与图片滑动时出错。请尽可能快地帮助我。提前谢谢。

Answer 1

你必须改变所有.hs-wrapper img:nth-child速度，它们也会在0.1秒后改变。

.hs-wrapper img{
    top: 0px;
    left: 0px;
    position: absolute;
    -webkit-animation: showMe 4s linear infinite 0s forwards;
    -moz-animation: showMe 4s linear infinite 0s forwards;
    -o-animation: showMe 4s linear infinite 0s forwards;
    -ms-animation: showMe 4s linear infinite 0s forwards;
    animation: showMe 4s linear infinite 0s forwards;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
    animation-play-state: paused;   
}
.hs-wrapper img:nth-child(1){
    z-index: 9;
}
.hs-wrapper img:nth-child(2){
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    animation-delay: 0.5s;
    z-index: 8;
}
.hs-wrapper img:nth-child(3){
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1s;
    animation-delay: 1s;
    z-index: 7;
}
.hs-wrapper img:nth-child(4){
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    -ms-animation-delay: 1.5s;
    animation-delay: 1.5s;
    z-index: 6;
}
.hs-wrapper img:nth-child(5){
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    -ms-animation-delay: 2s;
    animation-delay: 2s;
    z-index: 5;
}
.hs-wrapper img:nth-child(6){
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    -o-animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    animation-delay: 2.5s;
    z-index: 4;
}
.hs-wrapper img:nth-child(7){
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-nimation-delay: 3s;
    animation-delay: 3s;
    z-index: 3;
}
.hs-wrapper img:nth-child(8){
    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
    -o-animation-delay: 3.5s;
    -ms-animation-delay: 3.5s;
    animation-delay: 3.5s;
    z-index: 2;
}

在悬停时改变Css滑块的速度

1 个答案: