Question

我有这个简单的网页，我想做的是在第一张图片中淡入5秒，然后将图片＃2更改为5秒钟。这是我的代码：

<!DOCTYPE html>
<html>
<style>
#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

  @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: 30s;
animation-duration: 10s;
animation-direction: alternate;
}
}
</style>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="fade.css">
    <title>Wideout</title>
</head>
<body>

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/seMwpP0yeu4" 
frameborder="0" allowfullscreen></iframe>

<div id="cf">
  <img class="bottom" src="images/1.jpg" height="100" />
  <img class="top" src="images/2.jpg" height="100" />
</div>

</body>
</html>

我相信我的问题在于百分比部分。能帮帮我吗？非常感谢

Answer 1

这可以使用CSS3

完成

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

#crossfade > img:nth-child(2)  {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s; 
}

@-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 }

}

检查

此处a JSFiddle

html css交叉淡入淡出计时器

1 个答案: