Question

如何创建转换效果，如：

但是对于文字input？

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

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

＆＃13;

.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%;
  
}

＆＃13;

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

＆＃13;

CSS：文本输入边框的过渡效果

2 个答案: