javascript - 如何设置绝对位置div居中对齐

Question

我想用动画展示文字的文字 mask 效果

这是我想要实现的目标:http://jsfiddle.net/qTWTH/2/

我无法将红色文本置于黑色文本上方的“中心”，因此效果应该是这样的: http://jsfiddle.net/qTWTH/1/ *但对齐中心*

还有如何重复动画，根据 JS，它只动画一次，我想在效果完成后重复 JS。

代码:HTML

<div id="mainbox">
    <span id="black">Waiting for the task!</span>
    <span id="red">Waiting for the task!</span>
</div>

CSS

#mainbox {
    width:600px;
    text-align:center;
}
#black {
    color:black;
    font-weight:bold;
    font-size:2em;
}
#red {
    position:absolute;
    z-index:10;
    left:8px;
    width:0px;
    overflow:hidden;
    font-weight:bold;
    font-size:2em;
    color:red;
    white-space:nowrap;
}

JS

var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function () {
    console.log(red.style.width);
    if (red.style.width == "290px") clearInterval(animation);
    red.style.width = parseInt(red.style.width, 10) + 1 + "px";
}, 50);

如果您需要任何其他信息，请告诉我。

请提出建议。

Answer 1

检查这个fiddle

通过将 div 本身居中，并据此定位红色，您将确保它们对齐。

#mainbox {
    display: inline-block;
    position: relative;
}

html {
    text-align: center;
}

#red {
    left: 0;
}