我正在努力更改 slider 的动画,每次我尝试更改某些内容时, slider 都会消失。我想要一个向右滑动的动画而不是淡入淡出。
我已经研究过了,但没有一个符合我的要求。
.slider {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
z-index: -1;
}
.slider .fadeimg {
width: 100%;
height: auto;
position: absolute;
top: 47.5%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: galeria 9s infinite;
clip-path: ellipse(100% 95% at 50% 0%);
}
.fadeimg:nth-child(1) {}
.fadeimg:nth-child(2) {
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.fadeimg:nth-child(3) {
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
@keyframes galeria {
33.33% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="slider">
<img class="fadeimg" src="img/dummy-640x310-1.jpg" alt="">
<img class="fadeimg" src="img/dummy-640x310-2.jpg" alt="">
<img class="fadeimg" src="img/dummy-640x310-3.jpg" alt="">
<div class="gradient"></div>
</div>
最佳答案
试试这个:
.slider-container {
width:640px;
overflow:hidden;
}
.slider {
width: 2000px;
height: 100vh;
position: relative;
overflow: hidden;
z-index: -1;
}
.slider .fadeimg {
/*width: 100%;*/
width:auto;
height: auto;
/*position: absolute;
top: 47.5%;
left: 50%;
transform: translate(-50%, -50%);*/
opacity: 1;
animation: galeria 9s infinite;
clip-path: ellipse(100% 95% at 50% 0%);
}
.fadeimg:nth-child(1) {
animation-delay: 0s;
-webkit-animation-delay: 3s;
}
.fadeimg:nth-child(2) {
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.fadeimg:nth-child(3) {
animation-delay: 6s;
-webkit-animation-delay: 3s;
}
@keyframes galeria {
0% {
/*opacity: 1;*/
transform: translate(0%,0%);
}
50% {
transform: translate(-100%,0%);
}
100% {
transform: translate(-200%,0%);
}
}
<div class="slider-container">
<div class="slider">
<img class="fadeimg" src="https://dummyimage.com/640x310/0000ff/fff" alt="">
<img class="fadeimg" src="https://dummyimage.com/640x310/ff0000/fff" alt="">
<img class="fadeimg" src="https://dummyimage.com/640x310/00ff00/fff" alt="">
<div class="gradient"></div>
</div>
</div>
关于html - slider 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50200559/