“Multi -Item -Slider HTML -CSS” Code-Antworten

Multi -Item -Slider HTML -CSS

<div class="slides slowFade">
        <div class="slide">
            <img src="01.jpg" alt="img"/>
        </div>
        <div class="slide">
            <img src="02.jpg" alt="img"/>
        </div>
        <div class="slide">
            <img src="03.jpg" alt="img"/>
        </div>
        <div class="slide">
            <img src="04.jpg" alt="img"/>
        </div>
    </div>
    
    <style>
    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.slowFade {
    display: flex;
    align-items: flex-start;
    background: #fff;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.slowFade .slide img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    background: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    opacity: 0;
    transform: scale(1.5) rotate(15deg);
    -webkit-animation: slowFade 32s infinite;
            animation: slowFade 32s infinite;
}
.slowFade .slide:nth-child(3) img {
    -webkit-animation-delay: 8s;
            animation-delay: 8s;
}
.slowFade .slide:nth-child(2) img {
    -webkit-animation-delay: 16s;
            animation-delay: 16s;
}
.slowFade .slide:nth-child(1) img {
    -webkit-animation-delay: 24s;
            animation-delay: 24s;
}
@keyframes slowFade {
    25% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    40% {
        opacity: 0;
    }
}

@-webkit-keyframes slowFade {
    25% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    40% {
        opacity: 0;
    }
}
</style>