是否可以在HTML5或css中循环更改不透明度值? [英] Is it possible to loop changing opacity values in HTML5 or css?

查看:120
本文介绍了是否可以在HTML5或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();

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

这篇关于是否可以在HTML5或css中循环更改不透明度值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆