css 滑块 - 通过css的fadein / fadeout

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 滑块 - 通过css的fadein / fadeout相关的知识，希望对你有一定的参考价值。

/* 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;
}

以上是关于css 滑块 - 通过css的fadein / fadeout的主要内容，如果未能解决你的问题，请参考以下文章