ホバー効果の前後アフター

Question

私は前と後の効果についてウェブを精練しています。それはCSSの灰色の領域のようです。私はtwitterのホームページのような効果をどのように起こすのだろうと思っていました。これはホバー効果にあります。 http://imgur.com/a/jBikq。それにも移行がありますが、実装方法はわかりません。私はこれが前と後を使用している場合も、私はそれがホバーであると思うが、すべての助けが本当にありがとうと思います。ここで

は私のナビゲーションのための私のコードです：

<div id="navbar3" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
        <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li class="dropdown-header">Nav header</li> 
         <li><a href="#">Separated link</a></li> 
         <li><a href="#">One more separated link</a></li> 
        </ul> 
        </li> 
       </ul> 
       </div> 

Answer 1

あなたが:afterと:beforepseudo selectorでそれを行うことができます。 Imがあなたのイメージ、このようなその表情に基づいて例を作成しました：あなたは間違いなく::beforeを使用するかは、境界線/パディングをアニメーション化することができ、それは意志

@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 

 
body{ 
 
    padding: 5%; 
 
} 
 

 
.exemple { 
 
    font-family: 'Roboto', sans-serif; 
 
    position: relative; 
 
    padding: 2.5% 3.5%; 
 
    text-decoration: none; 
 
    font-size: 0.9em; 
 
    color: #333333; 
 
    transition: ease .1s; 
 
    -webkit-transition: ease .1s; 
 
} 
 

 
.exemple:before { 
 
    font-family: 'FontAwesome'; 
 
    content: '\f0e7'; 
 
    font-size: 1.1em; 
 
    margin-right: 10px; 
 
} 
 

 
.exemple:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 0px; 
 
    background: #20abe1; 
 
    transition: ease .1s; 
 
    -webkit-transition: ease .1s; 
 
} 
 

 
.exemple:hover { 
 
    color: #20abe1; 
 
} 
 

 
.exemple:hover:after{ 
 
    height: 4px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<a href="#" class="exemple">Moments</a>

Working Fiddle

Answer 2

同じ成長効果を作り出す。ここで働くフィドル：FIDDLE

Answer 3

あなたは、複製しようとしている正確な事柄について詳しくは述べていません。私は、それがナビゲーションアイテムの下からアニメートする下線だと仮定するつもりです。

これを行うには、CSSトランジションを使用する必要があります。

Twitterが行っていることを簡略化したものが以下のとおりです。彼らは<a>と<li>に高さを設定し、<a>に罫線を追加します。 overflow:hidden;が<li>の境界線に適用されているため、<a>に適用された境界線は最初は非表示になっています。

<li>をホバリングすると、<a>の高さが減少します。境界線をアニメーション化するために高さの遷移を使用します。ここ

ul, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
li { 
 
    float: left; 
 
    height: 40px; 
 
    overflow: hidden; 
 
} 
 
a { 
 
    display: block; 
 
    height: 40px; 
 
    padding: 0 10px; 
 
    line-height: 40px; 
 
    text-decoration: none; 
 
    overflow: hidden; 
 
    border-bottom: 3px solid #0c0; 
 
    transition: height 250ms ease-in-out; 
 
} 
 
li:hover a { 
 
    height: 37px; 
 
}

<ul> 
 
    <li><a href="#">One</a></li> 
 
    <li><a href="#">Two</a></li> 
 
    <li><a href="#">Three</a></li> 
 
</ul>

擬似要素を下線でアニメーションの別の方法です。

ul, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
li { 
 
    position: relative; 
 
    float: left; 
 
} 
 
a { 
 
    display: block; 
 
    padding: 0 10px; 
 
    line-height: 40px; 
 
    text-decoration: none; 
 
} 
 
a:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    display: block; 
 
    height: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
    background-color: #0c0; 
 
    transition: height 250ms ease-in-out; 
 
} 
 
li:hover a:after { 
 
    height: 3px; 
 
}

<ul> 
 
    <li><a href="#">One</a></li> 
 
    <li><a href="#">Two</a></li> 
 
    <li><a href="#">Three</a></li> 
 
</ul>