我正在尝试让 CSS 幻灯片放映正常工作，但我不明白为什么不行。故障出在关键帧上。我试图让图像从顶部蒙版下来，然后一旦隐藏，之前的图像就会回到蒙版中。这仅适用于关键帧 1 和 2。我不明白为什么。我的类(class)作业截止日期快到了，请帮忙!
CSS 代码:
#content {
background-color: white;
/* border: 1px solid black; */
padding: 0;
width: 100%;
-webkit-box-shadow: 0px 0px 30px 4px #acafb3;
-moz-box-shadow: 0px 0px 30px 4px #acafb3;
box-shadow: 0px 0px 30px 4px #acafb3;
}
#slider {
background-image: url('images/ssgbritain.jpg');
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
height: 265px;
width: 998px;
overflow: visible;
position: relative;
}
#fig-container {
margin:0;
padding:0;
position:relative;
}
#mask {
overflow: hidden;
height: 270px;
}
#slider figure {
width: 998px;
/* Width Image */
height: 265px;
/* Height Image */
position: absolute;
top: -270px;
/* Original Position - Outside of the Slider */
}
figure:nth-child(1) {
animation:cycle 25s linear infinite;
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
figure:nth-child(2) {
animation:cycle2 25s linear infinite;
-moz-animation:cycle2 25s linear infinite;
-webkit-animation:cycle2 25s linear infinite;
}
figure:nth-child(3) {
animation:cycle3 25s linear infinite;
-moz-animation:cycle3 25s linear infinite;
-webkit-animation:cycle3 25s linear infinite;
}
figure:nth-child(4) {
animation:cycle4 25s linear infinite;
-moz-animation:cycle4 25s linear infinite;
-webkit-animation:cycle4 25s linear infinite;
}
figure:nth-child(5) {
animation:cycle5 25s linear infinite;
-moz-animation:cycle5 25s linear infinite;
-webkit-animation:cycle5 25s linear infinite;
}
@keyframes cycle {
0% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
@-webkit-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
@keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
}
@-webkit-keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
@keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
}
@-webkit-keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
@keyframes cycle4 {
0% {
top: -270px;
}
52% {
top: -270px;
}
56% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
@-webkit-keyframes cycle4 {
0% {
top: -270px;
}
56% {
top: -270px;
}
60% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
@keyframes cycle5 {
0% {
top: -270px;
}
68% {
top: -270px;
}
72% {
top: 0px;
}
100% {
top: 0px;
}
}
@-webkit-keyframes cycle5 {
0% {
top: -270px;
}
76% {
top: -270px;
}
80% {
top: 0px;
}
92% {
top: 0px;
}
96 % {
top: -270px;
}
100% {
top: -270px;
}
}`
HTML代码:
<div id="content">
<div id="slider">
<div id="mask">
<div id="fig-container">
<figure>
<img src="http://coursework/web/images/shopping.jpg" alt="Shopping centre" />
<figcaption>rger</figcaption>
</figure>
<figure>
<img src="http://coursework/web/images/ssgbritain.jpg" alt="SS Great Britain" />
<figcaption>rger</figcaption>
</figure>
<figure>
<img src="http://coursework/web/images/susbridge.jpg" alt="Suspension Bridge" />
<figcaption>rger</figcaption>
</figure>
<figure>
<img src="http://coursework/web/images/xmasmarket.jpg" alt="Suspension Bridge" />
<figcaption>rger</figcaption>
</figure>
</div>
</div>
</div>
P.s忽略了图像的错误定位，似乎只有在jsfiddle上是这样的。
最佳答案
检查这个fiddle
你的CSS有错误!!就这么简单，只要查一下身份就知道了。
@-webkit-keyframes cycle3 永远不会关闭!
@keyframes cycle {
0% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
@-webkit-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
25% {
top: 0px;
}
26% {
top: -270px;
}
96% {
top: -270px;
}
100% {
top: 0px;
}
}
@keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
}
@-webkit-keyframes cycle2 {
0% {
top: -270px;
}
20% {
top: -270px;
}
24% {
top: 0px;
}
41% {
top: 0px;
}
42% {
top: -270px;
}
100% {
top: -270px;
}
}
@keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
}
@-webkit-keyframes cycle3 {
0% {
top: -270px;
}
36% {
top: -270px;
}
40% {
top: 0px;
}
61% {
top: 0px;
}
62% {
top: -270px;
}
100% {
top: -270px;
}
}
@keyframes cycle4 {
0% {
top: -270px;
}
52% {
top: -270px;
}
56% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
@-webkit-keyframes cycle4 {
0% {
top: -270px;
}
56% {
top: -270px;
}
60% {
top: 0px;
}
81% {
top: 0px;
}
82% {
top: -270px;
}
100% {
top: -270px;
}
}
@keyframes cycle5 {
0% {
top: -270px;
}
68% {
top: -270px;
}
72% {
top: 0px;
}
100% {
top: 0px;
}
}
@-webkit-keyframes cycle5 {
0% {
top: -270px;
}
76% {
top: -270px;
}
80% {
top: 0px;
}
92% {
top: 0px;
}
96% {
top: -270px;
}
100% {
top: -270px;
}
}
关于html - CSS 关键帧不适用于 CSS 图像幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20291245/