Question

我想用动画显示文本文本遮罩效果

这是我努力实现的目标：http://jsfiddle.net/qTWTH/

这不是完全有效的，我得到的效果＆＃34; Waiting ＆＃34;是我想要的完整文本，现在，等待＆＃34;等待＆＃34;红色文字暂停并一起改变整个作品的颜色。

另外如何隐藏完整的＆＃34;红色文字＆＃34;，它应该只在屏蔽时可见。

代码：的 HTML

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

CSS

#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;
}

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

将此CSS添加到您的#red选择器属性：

white-space: nowrap;

http://jsfiddle.net/qTWTH/1/

使用CSS或JS使用动画进行文本颜色遮罩

1 个答案: