BinaryDevelop
  1. ホーム
  2. css

[解決済み] ホバー効果：下枠の拡大

2023-08-18 16:31:29

質問

私は ボーダー上の遷移ホバー効果 で、ホバー時にボーダーが拡大するようにしたい。 

h1 {
  color: #666;
}

h1:after {
  position: absolute;
  left: 10px;
  content: '';
  height: 40px;
  width: 275px;
  border-bottom: solid 3px #019fb6;
  transition: left 250ms ease-in-out, right 250ms ease-in-out;
  opacity: 0;
}

h1:hover:after {
  opacity: 1;
}

<h1>CSS IS AWESOME</h1>

試しに Jsfiddle

どのように解決するのですか？

解決するには ホバー時に下部のボーダーを拡張する を使用することができます。 transform:scaleX'(); ( mdnリファレンス ) を作成し、ホバー時に 0 から 1 へと遷移させる。

ボーダーホバー効果の例を示します。

ボーダーとトランジションは 擬似要素 を使用することで、テキストの遷移を防ぎ、マークアップを追加しないようにします。

下部のボーダーを左右に展開するために transform-origin プロパティ を擬似要素の左または右に設定します。 

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
h1:hover:after { transform: scaleX(1); }
h1.fromRight:after{ transform-origin:100% 50%; }
h1.fromLeft:after{  transform-origin:  0% 50%; }

<h1 class="fromCenter">Expand from center</h1><br/>
<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>

注意：ブラウザのサポートを最大化するために、ベンダープレフィックスを追加する必要があります ( canIuse ).

ホバー時に下部のボーダーを2行で拡張する

テキストが2行にまたがる場合にこの効果を得ることができます。before擬似要素は、1行目に下線を引くために、絶対位置として bottom:1.2em; : 

h1 { position:relative;color: #666;display:inline-block; margin:0;text-transform:uppercase;text-align:center;line-height:1.2em; }
h1:after, h1:before {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
h1:before{
  position:absolute;
  bottom:1.2em; left:0;
  width:100%;
}
.ef2:hover:after {
  transition-delay:150ms;
}
  
h1:hover:after, h1:hover:before { transform: scaleX(1); }

<h1>Expand border<br/>on two lines</h1>
<br/>
<br/>
<h1 class="ef2">Expand border<br/>effect two</h1>

ホバーイン、ホバーアウト時の遷移方向が異なる。

ポイントは、hoverの状態でtransform-originの位置を左右に変えることです。こうすることで、下のボダ がホバー時に一方から入り、他方から出るようになります。 が表示されるようになります。

ここにデモがあります。 

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
h1.fromLeft:after{ transform-origin: 100% 50%; }
h1.fromRight:after{  transform-origin:   0% 50%; }
h1.fromLeft:hover:after{ transform: scaleX(1); transform-origin:   0% 50%; }
h1.fromRight:hover:after{ transform: scaleX(1); transform-origin: 100% 50%; }

<h1 class="fromRight">Expand from right</h1><br/>
<h1 class="fromLeft">Expand from left</h1>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します