小编典典

如果您知道有多少张图片，可以使用CSS3轻松完成。

#crossfade > img {

width: 100%;

height: 100%;

position: absolute;

top: 0px;

left: 0px;

color: transparent;

opacity: 0;

z-index: 0;

-webkit-backface-visibility: hidden;

-webkit-animation: imageAnimation 30s linear infinite 0s;

-moz-animation: imageAnimation 30s linear infinite 0s;

-o-animation: imageAnimation 30s linear infinite 0s;

-ms-animation: imageAnimation 30s linear infinite 0s;

animation: imageAnimation 30s linear infinite 0s;

}

“ -webkit-animation：imageAnimation 30s 线性 无限 0s; ”处的“ 30s”

表明，每个图像的动画将无限次持续30秒。

#crossfade > img:nth-child(2) {

background-image: url(../images/2.jpg);

-webkit-animation-delay: 6s;

-moz-animation-delay: 6s;

-o-animation-delay: 6s;

-ms-animation-delay: 6s;

animation-delay: 6s;

}

#crossfade > img:nth-child(3) {

background-image: url(../images/3.jpg);

-webkit-animation-delay: 12s;

-moz-animation-delay: 12s;

-o-animation-delay: 12s;

-ms-animation-delay: 12s;

animation-delay: 12s;

}

#crossfade > img:nth-child(4) {

background-image: url(../images/4.jpg);

-webkit-animation-delay: 18s;

-moz-animation-delay: 18s;

-o-animation-delay: 18s;

-ms-animation-delay: 18s;

animation-delay: 18s;

}

#crossfade > img:nth-child(5) {

background-image: url(../images/5.jpg);

-webkit-animation-delay: 24s;

-moz-animation-delay: 24s;

-o-animation-delay: 24s;

-ms-animation-delay: 24s;

animation-delay: 24s;

}

@-webkit-keyframes imageAnimation {

0% { opacity: 0;

-webkit-animation-timing-function: ease-in; }

8% { opacity: 1;

-webkit-animation-timing-function: ease-out; }

17% { opacity: 1 }

25% { opacity: 0 }

100% { opacity: 0 }

}

@-moz-keyframes imageAnimation {

0% { opacity: 0;

-moz-animation-timing-function: ease-in; }

8% { opacity: 1;

-moz-animation-timing-function: ease-out; }

17% { opacity: 1 }

25% { opacity: 0 }

100% { opacity: 0 }

}

@-o-keyframes imageAnimation {

0% { opacity: 0;

-o-animation-timing-function: ease-in; }

8% { opacity: 1;

-o-animation-timing-function: ease-out; }

17% { opacity: 1 }

25% { opacity: 0 }

100% { opacity: 0 }

}

@-ms-keyframes imageAnimation {

0% { opacity: 0;

-ms-animation-timing-function: ease-in; }

8% { opacity: 1;

-ms-animation-timing-function: ease-out; }

17% { opacity: 1 }

25% { opacity: 0 }

100% { opacity: 0 }

}

@keyframes imageAnimation {

0% { opacity: 0;

animation-timing-function: ease-in; }

8% { opacity: 1;

animation-timing-function: ease-out; }

17% { opacity: 1 }

25% { opacity: 0 }

100% { opacity: 0 }

}

2020-05-16