gpt4 book ai didi

html - Crossfade css 幻灯片放映在 Internet Explorer 7-8 中不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 04:17:40 25 4
gpt4 key购买 nike

您好,我正在使用以下 CSS 进行交叉淡入淡出幻灯片放映,但问题是它在 Iternet Explorer 版本 7/8 中不起作用,可能有什么建议让它在那里工作?我试用了 Jquery 幻灯片放映脚本,它正在工作,但我在幻灯片放映上有一个菜单,jquery 导致它在不同的图片淡入淡出变化时闪烁。

#crossfade > img { 
width: 100%;
height: 372px;
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;
}

#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;
animation-delay: 12s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > img:nth-child(5) {
-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 }
}

这是html

<div id="crossfade">
<img src="images/home_background.jpg" />
<img src="images/1_background.jpg" />
<img src="images/2_background.jpg" />
<img src="images/3_background.jpg" />
<img src="images/4_background.jpg" />
<img src="images/5_background.jpg" />
</div>

最佳答案

它不能正常工作只是因为不幸的是 IE 9 及更低版本不支持 CSS3 动画。

Reference here

如果您想在旧版浏览器中获得支持,请不要走 CSS3 路线来实现这一目标。只需使用 jQuery。

关于html - Crossfade css 幻灯片放映在 Internet Explorer 7-8 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19664989/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com