6 CSSリンクホバーエフェクトの6つの創造的なアイデア

いくつかのCSSを追加するホバー効果を通常のWebページにリンクすると、Webページの視覚的な魅力が強化されます。クールなホバーエフェクトを作成しようとするのに苦労したことがあるなら、この記事では、次のプロジェクトに直接使用できる6つのCSSエフェクトが提供されます。

始めましょう！

私たちが話していることは知っています:hoverですが、時には（常にではないかもしれませんが）すべての相互作用がマウスから直接来るわけではなく、クリックまたはキーを押すことができるので、 :focusも含めることをお勧めします。

スライドハイライトリンクホバーエフェクト

この効果は、リンクテキストの色を変更しながら、インラインリンクにボックスシャドウを適用します。まず、リンクに周囲のパディングを追加し、次に同じ値の負のマージンを追加して、パディングがテキストストリームを壊さないようにします。

backgroundプロパティの代わりにbox-shadowを使用します。これにより、移行が可能になります。

 {
  Box-shadow：Inset 0 0 0 https://www.php.cn/link/93ac0c550dd620dc7b88e5fe05c70e15b54b3d6;
  色：https：//www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  マージン：0 -.25rem;
  パディング：0 .25rem;
  トランジション：色.3sの容易さ、ボックスシェード.3s容易さ。
}
A：ホバー{
  Box-Shadow：Inset 100px 0 0 0 https://www.php.cn/link/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  色：白;
}

テキストスイッチリンクホバー効果

これは、リンクされたテキストをホバリング時に他のテキストと交換できる興味深い効果です。テキストの上にホバリングすると、リンクテキストがスライドし、新しいテキストがスライドします。

デモは説明よりも理解しやすいです。

このリンクホバー効果には、多くのトリックが含まれています。しかし、魔法は、データ属性を使用してテキストのスライドを定義し、リンク::after content属性を使用してそれを呼び出すということです。

まず、HTMLタグ：

<p>ホバー<a data-replace="get a link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">リンクを取得します</a></p>

これは多くのインラインタグですが、表示されるのは、リンクとスパンを含む段落タグです。

リンクに基本的なスタイルをいくつか追加しましょう。擬似エレメント（絶対に配置されます）を維持するための相対的な位置付けを提供し、ボックス要素スタイルの利便性を取得するためのインラインブロックとして表示され、擬似エレメントが引き起こす可能性のあるオーバーフローを隠す必要があります。

 {
  オーバーフロー：隠し;
  位置：相対;
  ディスプレイ：インラインブロック。
}

::before ::after 、実際のリンクと積み重ねられるように絶対的な位置を確保する必要があります。左の位置オフセットがゼロで、いくつかのスライド操作の準備ができているリンクの全幅に設定されていることを確認します。

 a ::前、
a ::後{
 コンテンツ： '';
  位置：絶対;
  幅：100％;
  左：0;
}

::after ：

 a ::後{
  コンテンツ：attr（data-replace）;
}

これでtransform: translate3d()を使用して、 ::after右に移動できます。 :hoverで元の位置に戻します。ちなみに、上方向にゼロオフセットを設定できます。これは、テキストのアンダースコアのように後に擬似要素::beforeを使用する場合に非常に重要です。

 a ::後{
  コンテンツ：attr（data-replace）;
  上：0;
  変換オリジン：100％50％;
  変換：translate3d（200％、0、0）;
}

A：ホバー::後、
A：フォーカス::後の{
  変換：translate3d（0、0、0）;
}

また、 transform: scale() ::beforeデフォルトで隠す前に変換し、 :hoverでスケーリングします。たとえば、2px ::afterの高さを小さくし、底に固定して、テキストのアンダースコアのように見えるようにします。

 a :: before {
  バックグラウンドコラー：https：//www.php.cn/link/93ac0c550dd620dc7b88e5fe05c70e15b54b3d6;
  高さ：2px;
  下：0;
  変換オリジン：100％50％;
  変換：Scalex（0）;
}

A：ホバー::前、
A：フォーカス::前{
  変換オリジン：0％50％;
  変換：Scalex（1）;
}

残りは好みです！完全な効果を得るために、変換効果、いくつかの色などに移行を追加します。これらの値は完全にあなた次第です。

完全なCSSコードを表示します

`` css {hidden：display;

A :: after {conters：absolute：0; ％; Scalex（0）; ATTR（データレプレース）; 15b54b3d6;

A：{Transform-Origin：0％Transform :: hover :: transform（0、0、0）;

スパン{inline-block;

A：ホバースパン{transform：translate3d（-200％、0、0）;

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c0c550dd620dc7b88e5fe5fe05c70e15bhtps/linktps/linktps/ D620DC7B88E5FE05C70E15B成長背景リンクホバー効果これは、私が多くの場所で見た非常に人気のある効果です。アイデアは、リンクの実際のテキストの少し後ろにある厚いアンダースコアとして、リンクの「::前の擬似要素」を使用することです。次に、ホバーでは、擬似要素が拡大してコンテンツ全体をカバーします。

OK、リンクの基本的なスタイル。 「::前」はテキストの装飾として機能し、その後、絶対的な位置を与えるときに「::前」を維持するための相対的な位置が続くため、テキストの装飾は必要ありません。

`` css
{
  テキスト装置：なし;
  位置：相対;
}

さて、その高さが約8pxになるように、 ::before設定してみましょう。また、絶対的なポジショニングを提供して、実際のリンクをオフセットしながら左側にあり、底から少しだけであるようにし、リンクを微妙に強調しているように見えるようにするために、実際のリンクをオフセットすることができます。 z-index: -1に設定することもできます。これにより、リンクの背後にあることを確認できます。

 a :: before {
  コンテンツ： '';
  背景色：HSLA（196、61％、58％、.75）;
  位置：絶対;
  左：0;
  下：3px;
  幅：100％;
  高さ：8px;
  z -index：-1;
}

とても良い。リンクをホバリングするときに成長する::beforeそのように見せてみましょう。高さを3pxに100％に変更するだけです。また、バックグラウンドが成長するにつれてより多くのスペースをカバーするように、ボトムオフセットをゼロに復元したことに注意してください。

 A：ホバー::前{
  下：0;
  高さ：100％;
}

ここで、これらの変更にわずかな移行を追加します。

 a :: before {
  コンテンツ： '';
  背景色：HSLA（196、61％、58％、.75）;
  位置：絶対;
  左：0;
  下：3px;
  幅：100％;
  高さ：8px;
  z -index：-1;
  遷移：すべての.3Sが容易になります。
}

完全なCSSコードを表示します

`css a {テキスト装置：https：//www.php.cn/link/93ac0c5c70e15b18272f;

Aの前： '';

A：HOVER :: {BOTORM：0;

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c0c550dd620dc7b88e5fe5fe05c70e15bhtps/linktps/linktps/ D620DC7B88E5FE05C70E15Bカラースワップリンクホバー効果右から左へのホバー効果私は、ナビゲーションのリンクでこの効果を個人的に使用するのが好きです。リンクは、アンダースコアのない色で始まります。次に、ホバーでは、右から新しい色がスライドし、アンダースコアが左からスライドします。

とてもきれいですよね？そこには多くのアクションがありますので、アクセシビリティの影響を考慮し、希望する還元モーションクエリにすべてを含めて、動きに敏感な人のためのより微妙なコンテンツに置き換えたいと思うかもしれません。

これがどのように機能するかです。途中で2つの色の間にハードストップを伴うリンクの線形背景勾配を提供します。

`` css
{
  背景イメージ：線形勾配（
    右に、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50％、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50％
  ）;
}

背景をリンクの幅の2倍、または200％に設定し、完全に左に配置します。このようにして、勾配の2色のうちの1つだけが表示されているようです。

 {
  背景イメージ：線形勾配（
    右に、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50％、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50％
  ）;
  バックグラウンドサイズ：200％100％;
  バックグラウンドポジション：-100％;
}

魔法のことは、いくつかの非標準の-webkit-プレフィックスプロパティを使用するときに起こります。テキストから色を削除して透明にします。別のものは、背景をテキストに勾配にクリップするので、テキストは実際には背景の色のように見えます。

 {
  背景イメージ：線形勾配（
    右に、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50％、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50％
  ）;
  バックグラウンドサイズ：200％100％;
  バックグラウンドポジション：-100％;
  -webkit-background-clip：テキスト;
  -webkit-text-fill-color：透過;
}

まだフォローしていますか？次に、 ::beforeを使用して、リンクの擬似的な非スコアを作成しましょう。リンクの背景勾配の隠された部分と同じ色を与え、実際のリンクの下に配置して、正しいtext-decoration: underline 。

 A：{前
  コンテンツ： '';
  背景：https：//www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6;
  表示：ブロック;
  位置：絶対;
  下：-3px;
  左：0;
  幅：0;
  高さ：3px;
}

ホバーでスライド::before位置に入り、左から入ります。

 A：ホバー{
 背景ポジション：0;
}

今、これは少し難しいです。ホバーでは、リンク::beforeリンク幅の100％に設定します。これをリンクのホバーに直接適用すると、リンク自体を全幅にし、画面の周りに移動します。おっと！

 A：ホバー::前{
  幅：100％;
}

少しの移行を追加して、物事をスムーズにするようにします。

 {
  背景イメージ：線形勾配（
    右に、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50％、
    https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50％
  ）;
  バックグラウンドサイズ：200％100％;
  バックグラウンドポジション：-100％;
  -webkit-background-clip：テキスト;
  -webkit-text-fill-color：透過;
  遷移：0.3秒すべて容易。
}

完全なCSSコードを表示します

`` `css a {background-image：linear-gradient（右、

54b3d6、

 <code>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%, https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%</code>

）背景：100％：5px：

A： ''

A：Hover {Background-Position：0;

A：Hover :: {width：100％;

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c0c550dd620dc7b88e5fe5fe05c70e15bhtps/linktps/linktps/ D620DC7B88E5FE05C70E15B RAINBOW UNDERLINE LINK HOVER EFFECT「テキスト - デカラー - レインボー」は使用できませんが、線形勾配とバックグラウンドマジックを混合することで偽造できます。

まず、リンクの「テキスト - デカレート」を削除します。

`` css
{
  テキスト装置：なし;
}

今ではグラデーションです。同じbackgroundプロパティに2つの線形勾配をリンクします。勾配は、ホバリング前の初期色です。 2つ目はホバーの虹です。

 {
  背景：
    線形勾配（
      右に、
      RGBA（100、200、200、1）、
      RGBA（100、200、200、1）
    ）、、
    線形勾配（
      右に、
      RGBA（255、0、0、1）、
      RGBA（255、0、180、1）、
      RGBA（0、100、200、1）
  ）;
}

背景のサイズを高さ3pxにして、下線を引くようにしましょう。 background-sizeプロパティの2つの勾配のサイズを同時に調整して、初期勾配が完全な幅と高さ3pxの高さになり、虹は幅がゼロになるようにすることができます。

 {
  背景：
    線形勾配（
      右に、
      RGBA（100、200、200、1）、
      RGBA（100、200、200、1）
    ）、、
    線形勾配（
      右に、
      RGBA（255、0、0、1）、
      RGBA（255、0、180、1）、
      RGBA（0、100、200、1）
  ）;
  バックグラウンドサイズ：100％3px、0 3px;
}

これで、最初のグラデーションが完全に見えるようになり、虹が見えなくなるように、 background-positionプロパティに背景勾配を同時に配置できます。ああ、使用時に背景が繰り返されないようにしましょう。

 {
  背景：
    線形勾配（
      右に、
      RGBA（100、200、200、1）、
      RGBA（100、200、200、1）
    ）、、
    線形勾配（
      右に、
      RGBA（255、0、0、1）、
      RGBA（255、0、180、1）、
      RGBA（0、100、200、1）
  ）;
  バックグラウンドサイズ：100％3px、0 3px;
  バックグラウンドポジション：100％100％、0 100％;
  バックグラウンドリピート：ノーリピート。
}

グラデーションスワップ値が次のように、ホバーのbackground-sizeを更新しましょう。

 A：ホバー{
  バックグラウンドサイズ：0 3px、100％3px;
}

最後に、ホバーが発生したら少し移行します。

 {
  背景：
    線形勾配（
      右に、
      RGBA（100、200、200、1）、
      RGBA（100、200、200、1）
    ）、、
    線形勾配（
      右に、
      RGBA（255、0、0、1）、
      RGBA（255、0、180、1）、
      RGBA（0、100、200、1）
  ）;
  バックグラウンドサイズ：100％3px、0 3px;
  バックグラウンドポジション：100％100％、0 100％;
  バックグラウンドリピート：ノーリピート。
  トランジション：バックグラウンドサイズ400ms;
}

見て！

アンダースコアリンクによるホバー効果

ジェフ・グラハムは、最近アダム・アーガイルのクールなホバー効果を分析したときにこの効果を導入しました。彼のデモでは、リンクの背後にある背景色が左から入り、マウスが移動すると右から出ます。

私のバージョンは、背景を単純化して、アンダースコアに似ています。

 {
  位置：相対;
}

a :: before {
    コンテンツ： '';
    位置：絶対;
    幅：100％;
    高さ：4px;
    ボーダーラジウス：4px;
    バックグラウンド - コラー：https：//www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b18272f;
    下：0;
    左：0;
    変換オリジン：右;
    変換：Scalex（0）;
    トランジション：.3sの容易さを変換します。
  }

A：ホバー::前{
  変換オリジン：左;
  変換：Scalex（1）;
}

これを達成する唯一の方法ではありません！ジャスティン・ウォンが背景を使用する別の方法は次のとおりです。

Geoffは、きちんとしたものからまったくばかげたものまで、さまざまなCSSリンクホバーエフェクトを提供しています。一見の価値があります！リンクおよびボタンスタイルの便利なコンテンツについては、DigitalOceanのPhilip Zastrowのチュートリアルをご覧ください。

リンク！

CSSを使用してインラインリンクに独自のホバーエフェクトを作成するための多くのオプションがあります。これらのエフェクトで遊んで、新しいエフェクトを作成することもできます。この記事を楽しんだことを願っています。試してみてください！

以上が6 CSSリンクホバーエフェクトの6つの創造的なアイデアの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。