哪个属性用于像雅虎邮件输入这样的边框底部动画？ [关闭]

【问题标题】：which property to use for border-bottom animation like yahoo mail inputs? [closed]哪个属性用于像雅虎邮件输入这样的边框底部动画？ [关闭]
【发布时间】：2016-08-31 21:24:36
【问题描述】：

我想在导航栏中对我的列表项的border-bottom 进行动画处理，但我不知道应该使用什么属性。

动画就像yahoo mail registration input

【问题讨论】：

标签： css input border yahoo-mail

【解决方案1】：

诀窍是使用嵌入阴影

input {
  width: 80%;
  height: 30px;
  border: none;
  background: transparent;
  }
.shadow {
  box-shadow: inset 0px -1px 0px 0px #ccc;
  transition: 0.8s;
  }
.shadow:focus {
  box-shadow:inset 0px -3px 0px 0px #7777dd;
  outline: 0;
  }

&lt;input class="shadow" type="text" placeholder="Placeholder" /&gt;

【讨论】：