アニメーションアンダーラインホバー効果をどうやって行うのですか？

-1

誰でもこのクールなアニメーションの下線ホバー効果がこのsiteでどのように行われるかを手助けできますか？私は自分自身を複製しようとしましたが、成功しませんでした。ここに私のjsbin アニメーションアンダーラインホバー効果をどうやって行うのですか？

出典

2016-10-22 ScreamQueen

以下のスニペットを参照してくださいあなたのコンテナにborderプロパティを適用することが可能ですCSSとアニメーション機能を書く必要があります。私のコードを参照できます。

a{ 
 
    text-decoration:none; 
 
} 
 
a:hover { 
 
    border-bottom: 1px solid; 
 
    -webkit-animation: border-hover .6s infinite ease-in-out !important; 
 
    animation: border-hover .6s infinite ease-in-out !important 
 
} 
 

 
@-webkit-keyframes border-hover { 
 
    0%, 
 
    100% { 
 
     border-bottom-style: dotted 
 
    } 
 
    25%, 
 
    50% { 
 
     border-bottom-style: dashed 
 
    } 
 
    75% { 
 
     border-bottom-style: solid 
 
    } 
 
} 
 

 
@-moz-keyframes border-hover { 
 
    0%, 
 
    100% { 
 
     border-bottom-style: dotted 
 
    } 
 
    25%, 
 
    50% { 
 
     border-bottom-style: dashed 
 
    } 
 
    75% { 
 
     border-bottom-style: solid 
 
    } 
 
} 
 

 
@-o-keyframes border-hover { 
 
    0%, 
 
    100% { 
 
     border-bottom-style: dotted 
 
    } 
 
    25%, 
 
    50% { 
 
     border-bottom-style: dashed 
 
    } 
 
    75% { 
 
     border-bottom-style: solid 
 
    } 
 
} 
 

 
@keyframes border-hover { 
 
    0%, 
 
    100% { 
 
     border-bottom-style: dotted 
 
    } 
 
    25%, 
 
    50% { 
 
     border-bottom-style: dashed 
 
    } 
 
    75% { 
 
     border-bottom-style: solid 
 
    } 
 
}

<a href="#" class"link">Link goes here</a>

出典

2016-10-22 15:06:19 Jazzzzz

これは、移行に行われ、あなたはHREFあなたを置く場合

が

body{ 
 
    background:black; 
 
    color:orange; 
 
} 
 
#somethin{ 
 
    display:inline-block; 
 
    border-bottom:solid transparent 5px; 
 
    transition:all 1s; 
 
} 
 
#somethin:hover{ 
 
    cursor:pointer; 
 
    border-bottom:solid red 5px; 
 
    
 
}

<div id="somethin"> 
 
Infinite Loop 
 
</div>

出典

2016-10-22 14:56:37 repzero

文字装飾スタイルのためCSS3のサポートが機能していないため、私は境界線の下を使用し、ここでのサンプルコードは次のとおりです。

<!html> 
<html> 
<head> 
    <style> 
     @keyframes cool-effect { 
      from { 
       border-bottom-style: solid; 
      } 
      50% { 
       border-bottom-style: dotted; 
      } 
      to { 
       border-bottom-style: dashed; 
      } 
     } 

     .fancy { 
      width : 300px; 
      border-bottom : 2px solid #000; 
     } 
     .fancy:hover { 
      -webkit-animation: cool-effect 1s infinite; 
      -o-animation:cool-effect 1s infinite; 
      animation: cool-effect 1s infinite; 
     } 
    </style> 
</head> 
<body> 
    <h2 class="fancy">Underline awesome effect !</h2> 
</body> 
</html>

出典

2016-10-22 15:10:42

アニメーションアンダーラインホバー効果をどうやって行うのですか？

答えて

関連する問題