具有缩放和移动效果的滑块

Question

我试图建立一个css唯一的幻灯片缩放效果。

我不能做的事情是从一张幻灯片到另一张幻灯片的缩放不同。例如，我希望第一张幻灯片具有当前的缩放效果，但从右到左，第二张幻灯片从左到右，第三张幻灯片从上到下缓慢移动。有什么帮助吗？

Here就是Jsfiddle

<div class="pic-wrapper">
<figure class="pic-1"></figure>
<figure class="pic-2"></figure>
<figure class="pic-3"></figure>
<figure class="pic-4"></figure>
</div>

Answer 1

可以通过在动画中设置特性background-position来完成此操作。

我将background-position: 0px 0px;添加到slideShow { 0% {}中，将background-position: -400px 0px;添加到slideShow { 100% {}中。

现在，图像缓慢地向左移动。

​

* {
     margin: 0;
     padding: 0;
}
 .pic-wrapper {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow: hidden;
}
 figure {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
    /*animation*/
     animation: slideShow 24s linear infinite 0s;
     -o-animation: slideShow 24s linear infinite 0s;
     -moz-animation: slideShow 24s linear infinite 0s;
     -webkit-animation: slideShow 24s linear infinite 0s;
}
 figurecaption {
     position: absolute;
     top: 50%;
     left: 50%;
     color: #fff;
}
 .pic-1 {
     opacity: 1;
     background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
}
 .pic-2 {
     animation-delay: 6s;
     -o-animation-delay: 6s;
     -moz--animation-delay: 6s;
     -webkit-animation-delay: 6s;
     background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
}
 .pic-3 {
     animation-delay: 12s;
     -o-animation-delay: 12s;
     -moz--animation-delay: 12s;
     -webkit-animation-delay: 12s;
     background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
}
 .pic-4 {
     animation-delay: 18s;
     -o-animation-delay: 18s;
     -moz--animation-delay: 18s;
     -webkit-animation-delay: 18s;
     background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
}
/* keyframes*/
 @keyframes slideShow {
     0% {
         background-position: 0px 0px;
         opacity: 0;
         transform:scale(1);
         -ms-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         transform:scale(1.1);
         -ms-transform:scale(1.1);
    }
     100% {
         background-position: -400px 0px;
         opacity: 0;
         transform:scale(1);
         -ms-transformm:scale(1);
    }
}
 @-o-keyframes slideShow {
     0% {
         background-position: 0px 0px;
         opacity: 0;
         -o-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         -o-transform:scale(1.1);
    }
     100% {
         background-position: -400px 0px;
         opacity: 0;
         -o-transformm:scale(1);
    }
}
 @-moz-keyframes slideShow {
     0% {
         background-position: 0px 0px;
         opacity: 0;
         -moz-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         -moz-transform:scale(1.1);
    }
     100% {
         background-position: -400px 0px;
         opacity: 0;
         -moz-transformm:scale(1);
    }
}
 @-webkit-keyframes slideShow {
     0% {
         background-position: 0px 0px;
         opacity: 0;
         -webkit-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         -webkit-transform:scale(1.1);
    }
     100% {
         background-position: -400px 0px;
         opacity: 0;
         -webkit-transformm:scale(1);
    }
}

<div class="pic-wrapper">
  <figure class="pic-1"></figure>
  <figure class="pic-2"></figure>
  <figure class="pic-3"></figure>
  <figure class="pic-4"></figure>
</div>

​

JSFiddle：https://jsfiddle.net/53gpxtk1/23/