如何使用 CSS3 设置 ul 背景图像淡入

How can I set ul background image fadeIn with CSS3?

本文关键字：背景 图像 淡入 ul 设置 何使用 CSS3      更新时间：2023-09-26

我的页面中有一个无序列表。使用 CSS3 显示的每个 li 元素都会旋转动画。我想在 li 动画完成后使用淡入效果设置背景图像。

我像这样为 ul 编写"addbg"类：

ul.addbg{
    background: transparent url(../img/circle-line.png) no-repeat 49% 94px;
    -webkit-transition:background 5.6s;  
    -moz-transition:background 5.6s;  
    -o-transition:background 5.6s;  
    transition:background 5.6s; 
}

但什么也没发生！

我该怎么做？

我的ul是这样的：

             <ul class="addbg">
                <li>
                    <span>Text1</span>
                </li>
                <li>
                    <span>Text2</span>
                </li>
                <li>
                    <span>Text3</span>
                </li>
                <li>
                    <span>Text4</span>
                </li>
            </ul>

您无法转换background-image属性，但是您可以将background-image设置为其:after :p seudo元素并transition其opacity。

下面是一个快速示例。

#image {
  position: relative;
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
#image:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(http://www.lorempixel.com/300/100);
  opacity: 0;
  transition: opacity 1s;
  z-index: -1;
}
#image:hover:after {
  opacity: 1;
}
<div id="image">Some Content</div>

如果要添加延迟而不是:hover，则可以定义@keyframes并向动画添加delay（在下面的示例中3s），并使用JavaScript将#image:after的opacity设置为动画结束后1。

animation: fadeIn 1s 1 3s - fadeIn是animation-name，1s是animation-duration，1是animation-iteration，3s是animation-delay。

var img = document.getElementById('image');
var event = ['webkitAnimationEnd', 'animationend'];
for (i = 0; i < event.length; i++) {
  img.addEventListener(event[i], function() {
    var ss = document.styleSheets;
    for (j = 0; j < ss.length; j++) {
      var rules = ss[j];
      for (k = 0; k < rules.cssRules.length; k++) {
        var r = rules.cssRules[k];
        if (r.selectorText == "#image::after" || r.selectorText == "#image:after") {
          r.style.opacity = 1;
        }
      }
    }
  });
}
#image {
  position: relative;
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
#image:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(http://www.lorempixel.com/300/100);
  -webkit-animation: fadeIn 1s 1 3s;
  animation: fadeIn 1s 1 3s;
  z-index: -1;
  opacity: 0;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div id="image">Some Content</div>

或者，您可以使用setTimeout()进行纯JavaScript动画，为动画使用setInterval()，而无需使用transition或@keyframes。

var ss = document.styleSheets;
for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == "#image::after" || r.selectorText == "#image:after") {
      var op = 0;
      setTimeout(function() {
        var fadeIn = setInterval(function() {
          r.style.opacity = op;
          op += 0.005;
          if (op > 1) {
            clearTimeout(fadeIn);
          }
        }, 7)
      }, 3000)
    }
  }
}
#image {
  position: relative;
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
#image:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(http://www.lorempixel.com/300/100);
  z-index: -1;
  opacity: 0;
}
<div id="image">Some Content</div>

相关文章：