Question

我想制作一个简单的图像幻灯片滚动。它将与C＃程序一起使用。我的CSS3经验相当低...... 所以我有一个问题

我的图像幻灯片滚动与4,5,6张图像完美配合，但是当我尝试更多图像时，它不会像它应该的那样工作。

示例4图像

HTML：

<html>
<head>
<link href='test.css' rel='stylesheet' type='text/css'>
</head>
<body>
<img class='Slide' src=F:\Fraps\Screenshots\AC3SP%202014-08-26%2017-51-28-42.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\AC3SP%202014-08-26%2017-52-31-58.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-14%2014-33-59-36.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-14%2014-34-06-00.bmp></img>
</body>
</html>

CSS：

.Slide {
position: absolute;
opacity: 0;
-webkit-animation: round 20s infinite;
animation: round 20s infinite;
}

@-webkit-keyframes round 
{ 
    0% { opacity: 0}
    8% { opacity: 1}
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes round 
{
    0% { opacity: 0}
    8% { opacity: 1}
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
img:nth-child(2) {-webkit-animation-delay: 5s; animation-delay: 5s;}
img:nth-child(3) {-webkit-animation-delay: 10s; animation-delay: 10s;}
img:nth-child(4) {-webkit-animation-delay: 15s; animation-delay: 15s;}

问题：我使用14个图像作为示例，您看到第一个图像一次。当动画重新开始时，您会看到最后一个，然后直接看到第二个图像...

示例14图像 HTML：

<html>
<head><link href='test.css' rel='stylesheet' type='text/css'></head>
<body>
<img class='Slide' src=F:\Fraps\Screenshots\AC3SP%202014-08-26%2017-51-28-42.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\AC3SP%202014-08-26%2017-52-31-58.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-14%2014-33-59-36.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-14%2014-34-06-00.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-14%2014-34-11-92.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-16%2013-13-34-71.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-16%2013-13-46-53.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-16%2013-13-59-51.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-16%2013-24-28-15.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-16%2013-24-34-21.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-16%2013-49-43-91.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-16%2015-18-33-87.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\ACU%202014-11-16%2015-21-02-86.bmp></img>
<img class='Slide' src=F:\Fraps\Screenshots\Watch_Dogs%202014-10-28%2023-05-04-81.bmp></img>
</body></html>

CSS：

.Slide {
position: absolute;
opacity: 0;
-webkit-animation: round 70s infinite; 
animation: round 70s infinite;
}

@-webkit-keyframes round 
{ 
    0% { opacity: 0}
    8% { opacity: 1}
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes round 
{
    0% { opacity: 0}
    8% { opacity: 1}
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

img:nth-child(2) {-webkit-animation-delay: 5s; animation-delay: 5s;}
img:nth-child(3) {-webkit-animation-delay: 10s; animation-delay: 10s;}
img:nth-child(4) {-webkit-animation-delay: 15s; animation-delay: 15s;}
img:nth-child(5) {-webkit-animation-delay: 20s; animation-delay: 20s;}
img:nth-child(6) {-webkit-animation-delay: 25s; animation-delay: 25s;}
img:nth-child(7) {-webkit-animation-delay: 30s; animation-delay: 30s;}
img:nth-child(8) {-webkit-animation-delay: 35s; animation-delay: 35s;}
img:nth-child(9) {-webkit-animation-delay: 40s; animation-delay: 40s;}
img:nth-child(10) {-webkit-animation-delay: 45s; animation-delay: 45s;}
img:nth-child(11) {-webkit-animation-delay: 50s; animation-delay: 50s;}
img:nth-child(12) {-webkit-animation-delay: 55s; animation-delay: 55s;}
img:nth-child(13) {-webkit-animation-delay: 60s; animation-delay: 60s;}
img:nth-child(14) {-webkit-animation-delay: 65s; animation-delay: 65s;}

动画CSS3（幻灯片滚动）

0 个答案: