是否可以在HTML5或css中循环更改不透明度值？ [英] Is it possible to loop changing opacity values in HTML5 or css?
问题描述
这是我目前正在使用的代码。它适用于我分层两个图像的目的。我想要做的是将layer0不透明度降低到0，因为layer1不透明度在几秒钟内增加到100。 {然后使用layer2继续使用layer1，依此类推，最终循环回到layer0}
This is the code I'm currently working with. It works to my purposes of layering the two images. What I am trying to do is have the layer0 opacity lower to 0 as the layer1 opacity increases to 100 over a few seconds. {and then on to layer1 with layer2 and so on eventually looping back to layer0}
任何帮助都将不胜感激。
Any help would be appreciated.
<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进行循环。你可以制作一个延迟的关键帧动画，但这不允许你从头开始循环：jsfiddle.net/G4PTM（firefox / ie10） - 你可以用不同的时间制作很多关键帧，你可以让它工作，但它需要相当多的代码并且不能很好地扩展（假设您想要添加另一个图层/图像，代码很快就会变得无法管理）
You're probably better off with javascript for the looping. You could make a delayed keyframe animation, but that won't allow you to loop from the start again: jsfiddle.net/G4PTM (firefox/ie10) -- You could make a lot of keyframes with different timings and you can make it work, but it would require quite a bit of code and not scale well (say you wanted to add another layer/image the code would quickly become unmanagable)
使用一些javascript，你可以循环遍历div并添加和删除一个类名来触发转换，就像Jon提到的那样。这是一个工作演示（简单地使用jQuery，如果你需要vanilla js，请告诉我）
With some javascript, you can just loop through the divs and add and remove a classname to trigger the transitions, like Jon mentioned. Here is a working demo (using jQuery for simplicity, let me know if you need vanilla js)
<div class="layer0">
</div>
<div class="layer1">
</div>
<div class="layer2">
</div>
css
css
div {
width: 371px;
height: 345px;
opacity: 0;
position: absolute;
transition: opacity 2s;
}
div.active {
opacity: 1;
}
div.layer0 {
background:url(http://lorempixel.com/373/345);
}
div.layer1 {
background:url(http://lorempixel.com/372/345);
}
div.layer2 {
background:url(http://lorempixel.com/374/345);
}
js + jquery
js+jquery
var firstDiv = $(".layer0");
var current;
function loopsie() {
// if first iteration or reached end, use first div
if (!current || !current.length) current = firstDiv;
current.addClass("active");
setTimeout(function() {
current.removeClass("active");
setTimeout(function() {
current = current.next();
loopsie(); // recurse
}, 2000);
}, 2000);
}
//initialize
loopsie();
工作演示 http://jsfiddle.net/G4PTM/2/
纯JavaScript （没有jQuery）：
Plain JavaScript (Without jQuery):
var firstDiv = document.querySelector(".layer0"); // IE 8+
var current;
function loopsie() {
// if first iteration, use first div
if (!current) current = firstDiv;
current.classList.add("active"); // IE 10+, shim at https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
setTimeout(function() {
current.classList.remove("active");
// account for text node (if there is whitespace in html)
if (current.nextSibling && current.nextSibling.nodeName == "DIV") {
current = current.nextSibling;
} else if (current.nextSibling && current.nextSibling.nextSibling && current.nextSibling.nextSibling.nodeName == "DIV") {
current = current.nextSibling.nextSibling;
} else {
// reached end
current = firstDiv;
}
loopsie(); // recurse
}, 2000);
}
//initialize
loopsie();
这篇关于是否可以在HTML5或css中循环更改不透明度值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
