Question

有没有办法编写一个CSS转换，在用户输入时会在输入文本元素中淡入？

目前，文本可以在普通HTML文本元素中淡入，因为我们可以告诉它从0过渡到1不透明度;但输入文本在用户输入之前不存在。

例如，如果我输入我的用户名，我输入的字母会淡入，每个字母从0到1不透明度在.3秒内。

我尝试过使用转换和动画，但希望将其保留在CSS中。

Answer 1

实现类似效果的可能方法：使用线性渐变创建部分透明的叠加，并在移动蒙版位置时逐渐显示。

 <div id='container'>
    <input type='text'></input>
    <div class='fader'></div>
 </div>

$("input").on("keydown", function(e) {
    var width = $("input").val().length + 1;
    $(".fader").css("left", (width * 8) + 3);
});


#container {
    position: relative;
    height: 25px;
    width: 400px;
}

input {
    width: 100%;
}

input, .fader {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    font-family: monospace;
}

.fader {
    top: 2px;
    bottom: 4px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0px, white, 15px, white 100%);
    transition: left 1s ease;
}

以下是小提琴的样子：

http://jsfiddle.net/go7trwzx/1/

Answer 2

我不相信有任何方法可以使用HTML input元素，当然不是没有Javascript。任何解决方案都需要您为每个字母创建单独的元素，然后单独将转换应用于每个元素。

如果您想要看到它的外观，请查看＆＃34;类型＆＃34;示例和附带的源代码：
http://codyhouse.co/demo/animated-headlines/index.html

CSS：输入文本中的淡入过渡？

2 个答案: