CSS: 文字输入边框的过渡效果

Question

如何创建过渡效果：

但对于文本 input?

我尝试用 input 替换 h1 但它不起作用。

Answer 1

您必须更改 HTML 结构以对 input 做同样的事情，因为您不能在输入元素上使用像 :after 这样的伪元素（这是一个自动关闭元素)

HTML

<div id="input">
  <input type="text" value="CSS IS AWESOME" /><span></span>
</div>

CSS

#input {
    color: #666;
    position: relative;
    display: inline-block;
}

span {
    position: absolute;
    left: 50%;
    content: '';
    height: 40px;
    height: 5px;
    background: #f00;
    transition: all 0.5s linear;
    width: 0;
    bottom: -5px;  
}

input:hover ~ span {
    width: 200px;
    margin-left: -105px;
}

See this fiddle

Answer 2

.input_container{
  display: inline-block;
  text-align: center;
}
.awsome_input{
  padding: 5px 10px;
  border: none;
  background: transparent;
  display: block;
}
.awsome_input_border{
  display:inline-block;
  width:0px;
  height: 2px;
  background: #FEC938;
  position: relative;
  top:-5px;
  -webkit-transition: all ease-in-out .15s;
  -o-transition: all ease-in-out .15s;
  transition: all ease-in-out .15s;
}
.awsome_input:hover,
.awsome_input:active, 
.awsome_input:focus{
  outline: none;
}
.awsome_input:hover+.awsome_input_border,
.awsome_input:active+.awsome_input_border, 
.awsome_input:focus+.awsome_input_border{
  width:100%;
  
}

<div class="input_container">
<input type="text" class="awsome_input" 
placeholder="What do you think?"/>
<span class="awsome_input_border"/>
</div>

CSS: 文字输入边框的过渡效果

CSS: Transition effect on text input border

css

transition

input

border