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/

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

1 个答案: