Question

我的任务是创建一个放置在广告客户网站首页的3张图片幻灯片。因此，我创建了一个嵌入了css的页面，然后我创建了一个代码段（只是一个iframe）来定位页面，该页面将提供给广告商以放在他们的页面上。

页面源代码（AD.html）

<html>
<head>
<style>
.AD-img {
  position: relative;
  height: 300px;
  width: 250px;
}
.AD-img img {
  position: absolute;
  left: 0;
  top: 0;
}
.AD-img img:nth-of-type(2) {
  opacity: 0;
  -webkit-animation: fading2 ease 14s infinite;  
  animation: fading2 ease 14s infinite;
}
.AD-img img:nth-of-type(3) {
  opacity: 0;
  -webkit-animation: fading3 ease 14s infinite;  
  animation: fading3 ease 14s infinite;
}
@-webkit-keyframes fading2 {
  0%: { opacity: 0;}
  21% { opacity: 0;}
  35% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
}
@keyframes fading2 {
  0%: { opacity: 0;}
  21% { opacity: 0;}
  35% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
}
@-webkit-keyframes fading3 {
  0%: { opacity: 0;}
  56% { opacity: 0;}
  70% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
}
@keyframes fading3 {
  0%: { opacity: 0;}
  56% { opacity: 0;}
  70% { opacity: 1;}
  93% { opacity: 1;}
  100% { opacity: 0;}
</style>
</head>
</body>
<div class="AD-img">
   <img width="300px" height="250px" src="1.jpg">
   <img width="300px" height="250px" src="2.jpg">
   <img width="300px" height="250px" src="3.jpg">
</div>
</body>
</html>

为了测试iframe，我创建了一个小页面并将其放在同一目录中。我们称之为index.html

<html>
<head>
</head>
</body>
    <iframe width="100%" height="100%" frameborder="0" src="http://www.example.com/ADdirectory/AD.html"></iframe>
</body>
</html>

图片和网页托管在我的服务器上，而非广告客户（为了保护隐私，我已经将域名等更改为通用等价物）。

在chrome中一切正常，但是如果我在firefox中查看index.html，那么过渡非常不稳定。奇怪的是，如果我直接查看AD.html页面，firefox工作正常。

为了增加头痛，在IE9中根本不起作用（为什么不能每个人都使用chrome：p）。

我对css很新，所以我希望这很简单，我很想念。

iframe中的css过渡波动

0 个答案: