1

我在没有 jQuery 的干净 CSS3 上制作了一个横幅滑块。它适用于每个地球浏览器。如何在 IE-9 中进行这项工作？

http://jsfiddle.net/zBGNm/15/

我使用了@keyframes。每个 <LI> 都由适当的动画制作动画，该动画会改变列表项的不透明度和 z-index。每个 <LI> 都有自己的背景，所以当列表项在动画过程中相互覆盖时可以看到。这是CSS：

body {
background: url(http://htmler.org.ua/wp-content/uploads/2011/04/Subtle-Patterns-High-quality-patterns-for-your-next-web-project-1.png);
width: 50px;
height: 100%;}

#slider {
width: 100%;
height: 50px;
position: fixed;
z-index:6;
}

#slider:hover li
{
-webkit-animation-play-state: paused;
}

#slider li
{
margin:0;
padding:0;
width: 100%;
height: 50px;
position:absolute;
color: white;
}

#slider li:first-of-type
{
-webkit-animation: anim1 40s infinite;
background:-webkit-linear-gradient(top, #FF6600, #550000);}

#slider li:nth-of-type(2)
{
-webkit-animation: anim2 40s infinite;
background:-webkit-linear-gradient(top, #FF0033, #330000);}


#slider li:nth-of-type(3)
{
-webkit-animation: anim3 40s infinite; 
background:-webkit-linear-gradient(top, #9933CC, #330055);}


#slider li:nth-of-type(4)
{
-webkit-animation: anim4 40s infinite;
background:-webkit-linear-gradient(top, #003366, #001133);}

#slider li:nth-of-type(5)
{
-webkit-animation: anim5 40s infinite;
background:-webkit-linear-gradient(top, #99CC00, #115500);}

@-webkit-keyframes anim1 {
0% {z-index:6;opacity:0;}
5% {z-index:6; opacity:1;}
20% {z-index:6; opacity:1;}
21% {z-index:1;}
100% {z-index:1;}
}

@-webkit-keyframes anim2 {
0% {z-index:2;opacity:0;}
19% {z-index:2; opacity:0;}
20% {z-index:6; opacity:0;}
25% {z-index:6; opacity:1;}
40% {z-index:6; opacity:1;}
41% {z-index:2;}
100% {z-index:2;}
}

@-webkit-keyframes anim3 {
0% {z-index:3;opacity:0;}
39% {z-index:3; opacity:0;}
40% {z-index:6; opacity:0;}
45% {z-index:6; opacity:1;}
60% {z-index:6; opacity:1;}
61% {z-index:3;}
100% {z-index:3;}
}

@-webkit-keyframes anim4 {
0% {z-index:4;opacity:0;}
59% {z-index:4; opacity:0;}
60% {z-index:6; opacity:0;}
65% {z-index:6; opacity:1;}
80% {z-index:6; opacity:1;}
81% {z-index:4;}
100% {z-index:4;}
}

@-webkit-keyframes anim5 {
0% {z-index:5;opacity:1;}
5% {z-index:1;opacity:0;}
79% {z-index:5; opacity:0;}
80% {z-index:6; opacity:0;}
85% {z-index:6; opacity:1;}
100% {z-index:5;}
}

和标记：

<html>
<body>
<ul id="slider">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

这里没有其他浏览器的前缀，这里是为了简短。在我的电脑上，我写了所有的前缀。正如我所说，它适用于任何地方，但不适用于 IE。这个 BRRRROOOOOOUUUUUUZZZEEERRR 有解决方法吗？？！！！！

4

0 回答 0