logo标签列表

HTML5或CSS中是否可以循环更改不透明度值？

javascriptcsshtml
4
这是我目前正在处理的代码。它可以完成将两个图像分层的目的。我的目标是让第一层（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>
3个回答
3
为了不断地在循环中执行此操作，您需要一些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>

这只是彩色方块，但你的可以包含图片。

接下来是一些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);
});

相当简单。如果您想查看工作演示，请单击我的fiddle链接并点击运行按钮。
2

简短回答：不容易。

您可能更适合使用 javascript 进行循环。您可以创建一个延迟的关键帧动画，但这不会让您再次从开始循环：jsfiddle.net/G4PTM（firefox / ie10）-- 您可以创建许多具有不同时间的关键帧，并且可以使其工作，但这将需要相当多的代码并且不能很好地扩展（例如，如果您想添加另一个层/图像，则代码很快就会变得难以管理）

通过一些 JavaScript，您只需循环遍历 div 并添加和删除类名称来触发转换，就像 Jon 提到的那样。以下是一个工作演示（为了简单起见，使用 jQuery，如果需要原始 JS，请告诉我）

html

<div class="layer0">
</div>
<div class="layer1">
</div>
<div class="layer2">
</div>

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

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）：

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();

http://jsfiddle.net/G4PTM/6/

这非常接近我需要解决的问题，谢谢！我正在尝试淡出到下一张图像中淡入，而不是淡出到白色。我不确定这是否有任何意义。 - Eyefoundart
@Eyefoundart 你可以跳过其中一个 setTimeout，使得淡入效果与之前的淡出效果同时开始：http://jsfiddle.net/G4PTM/3/ - xec
jsfiddle.net/G4PTM/3非常完美，谢谢 :) 纯JS将是一流的，但我相信无论如何我都会解决它的 :D - Eyefoundart
@Eyefoundart，为您添加了一个非jQuery版本 ;) - xec
0
你可以使用CSS过渡效果。下面的示例将在500毫秒的时间内淡入淡出.layer0：
div.layer0 {
    opacity: 1;
    -webkit-transition:opacity 500ms ease-out;
    -moz-transition:opacity 500ms ease-out;
    -o-transition:opacity 500ms ease-out;
    transition:opacity 500ms ease-out;
}

div.layer0:hover {
    opacity: 0;
}
动画还是过渡效果？因为动画也可以很好地工作。 - agconti
div.layer0:hover 中的过渡属性是不必要的。 - Tim
1
这个循环如何遍历div元素？ - xec
过渡效果非常重要。基本上我想做的是从原始照片开始，淡化到不同的变体，然后再回到起始图像并重复此过程。 - Eyefoundart
抱歉，我误解了你的问题。我认为不可能仅使用CSS循环遍历div。你需要使用jQuery... - eevaa
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接