我的页面中有一个无序列表。使用 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>