css 滑块 - 通过css的fadein / fadeout

Posted 2021-05-13

/* The animation code */
@keyframes example {
    0%   {background-image: url("https://static.pexels.com/photos/7174/summer-grass.jpg");}
    50% {background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjOCNcnik0caAqRX601w3rTlf3ZTANFojDWVxc2WOkvOzu4NF7HQ");}
    100%   {background-image: url("https://static.pexels.com/photos/7174/summer-grass.jpg");}
}

/* The element to apply the animation to */
div {
    width: 400px;
    height: 300px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}