这是我目前正在使用的代码。它适用于我将两个图像分层的目的。我想要做的是将 layer0 不透明度降低到 0，因为 layer1 不透明度在几秒钟内增加到 100。 {然后到 layer1 和 layer2 等等，最终循环回到 layer0}
如有任何帮助，我们将不胜感激。
<head>
<style>
div.layer0
{
width: 371px;
height: 345px;
background:url(image2.jpg);
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
div.layer1
{
width: 371px;
height: 345px;
background:url(image3.jpg);
opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier */
}
</style>
</head>
<body>
<div class="layer0">
<div class="layer1">
</div>
</div>
</body>
最佳答案
要在循环中持续执行此操作，您需要一些 javascript 来将适当的 active 类添加到您要显示的图像。然后使用 CSS 过渡，您可以实现所需图像之间的淡入淡出。
我创建了一个 jsfiddle 来给你一个这个工作的例子:http://jsfiddle.net/pacso/H6dqq/
基本情况如下。
一些您将淡出的简单 HTML div:
<div class='red square active'></div>
<div class='yellow square'></div>
<div class='green square'></div>
<div class='blue square'></div>
这些只是彩色方 block ，但您的可以包含图像。
接下来，一些 CSS 标记:
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.square {
width: 200px;
height: 200px;
position: absolute;
top: 20px;
left: 20px;
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
.active {
opacity: 1;
}
请注意，我的转换会改变 div 本身的不透明度。您可能需要根据需要更改它。
现在 javascript 让它在无限循环中工作:
jQuery(function() {
window.setInterval(function () {
activeSquare = $('.active');
nextSquare = activeSquare.next()
if (nextSquare.length == 0) {
nextSquare = activeSquare.siblings().first();
}
nextSquare.addClass('active');
activeSquare.removeClass('active');
}, 3000);
});
相当简单。点击link to my fiddle如果您想查看工作演示，请点击运行按钮。
关于javascript - 是否可以循环更改 HTML5 或 css 中的不透明度值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20922833/