java图片淡入淡出,CSS中的多图像交叉淡入淡出 - 无（java）脚本

最新推荐文章于 2021-08-03 21:41:08 发布

灰白光

最新推荐文章于 2021-08-03 21:41:08 发布

阅读量100

点赞数

文章标签： java图片淡入淡出

Is it possible to cross fade 5 images in CSS, without using java script? I have found a similar question:

css3 image crossfade (no javascript) , however, it has only the CSS code snippet; which I tried, but could not get it working. I'm new to CSS, so could not link the CSS mentioned in the above page to my following HTML:

png

解决方案

This can easily be done with CSS3 if you know how many images you have.

#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;

}

The "30s" at "-webkit-animation: imageAnimation 30s linear infinite 0s;" tells that the animation for each image will last 30 seconds in infinete number of times.

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

-webkit-animation-delay: 6s;

-moz-animation-delay: 6s;

-o-animation-delay: 6s;

-ms-animation-delay: 6s;

animation-delay: 6s;

}

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

-webkit-animation-delay: 12s;

-moz-animation-delay: 12s;

-o-animation-delay: 12s;

-ms-animation-delay: 12s;