您可以使用JavaScript中的DOM操作来创建带有动态效果的文本输入框。以下是一个简单的例子：
HTML代码：
<div id="input-container">
<input type="text" id="input-text">
<span id="input-line"></span>
</div>CSS代码：
#input-container {
position: relative;
width: 200px;
}
#input-text {
border: none;
outline: none;
width: 100%;
font-size: 16px;
padding: 5px;
background-color: transparent;
}
#input-line {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 0;
background-color: #000;
transition: width 0.3s ease;
}JavaScript代码：
const inputText = document.getElementById('input-text');
const inputLine = document.getElementById('input-line');
inputText.addEventListener('input', () => {
const inputTextWidth = inputText.clientWidth;
const inputTextValueLength = inputText.value.length;
const inputLineLength = inputTextWidth / inputTextValueLength;
inputLine.style.width = inputLineLength + 'px';
});在这个例子中，我们创建了一个包含文本输入框和一个底部线条的容器。我们使用CSS设置了文本输入框和底部线条的样式，并将底部线条的宽度设置为0。在JavaScript中，我们使用addEventListener方法来监听文本输入框的输入事件。每次输入事件发生时，我们计算输入框的宽度和当前输入的字符数量，然后将底部线条的宽度设置为输入框宽度除以字符数量。这样，底部线条将根据输入的文本动态改变宽度，从而实现动态效果。