web-dev-qa-db-ja.com

CSS：bottom-border-transition-中央から展開

ウェブサイトに少しトランジションを追加したい。私はすでに誰かが入力フィールド（つまり：focus）にいるとき、境界線が遷移とともに色を変えることを知っています。中央から左右への移行をお願いします。

したがって、アニメーションは両側に広がる境界です。 CSSでそれは可能ですか？ JqueryまたはJavaScriptを使用する必要がある場合は問題ありません。

よろしくお願いします、イアン

cssanimationfocusbordertransition
9
Ian

CSSで境界線の遷移を行うことができます。お役に立てれば。 CODEPENの例

HTML：

body {
  padding: 50px;
}

a, a:hover {
  color: #000;
  text-decoration: none;
}

li {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
  margin-right: 10px;
}
li:last-child {
  margin-right: 0;
}

li:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
li:hover:after {
  width: 100%;
  background: blue;
}
<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">PAGE</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
34
ChamathD