下線アニメーション10選：ホバーで魅せるリンクエフェクト

リンクの下線って、ただの線じゃつまらないですよね。ホバーしたときに何か動きがあると面白いと思うんですけど。

その通り。下線にアニメーションを加えると、リンクがより魅力的になるんだ。今日は、下線に特化した10種類のホバーエフェクトを作ってみよう。

下線だけでそんなにバリエーションが作れるんですか？

もちろん。縮小、拡大、回転、点滅、光の流れ、スライド、浮き上がりなど、様々な表現が可能だよ。CSSアニメーションと疑似要素を組み合わせることで、洗練された動きを実現できるんだ。

それぞれのエフェクトで、どんな印象を与えられるんですか？

エフェクトごとに雰囲気が変わるよ。例えば、光が流れるエフェクトは高級感を演出し、スライドは軽快な印象を与える。それじゃあ、実際に作りながら違いを体感してみよう。

作成するリンクパーツ

今回は、下線のホバーアニメーションに特化した10種類のリンクを作成します。それぞれが異なる動きと印象を持ち、Webサイトの雰囲気に合わせて選択できます。

1. 下線が一瞬小さくなるリンク

ホバー時に下線が一瞬縮小して元に戻るエフェクト

HTML

<a href="#" class="link-shrink">リンクテキスト</a>

CSS

.link-shrink {
    display: inline-block;
    padding: 0.25rem 0;
    background: transparent;
    color: #2563eb;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    position: relative;
    transition: color 0.3s;
}

.link-shrink::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2563eb;
}

.link-shrink:hover::before {
    animation: shrinkUnderline 0.4s ease-in-out;
}

.link-shrink:hover {
    color: #1e40af;
}

@keyframes shrinkUnderline {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.8); }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します:

a要素を使用して、軽快で遊び心のあるリンクを作成してください。

## 初期状態
- 透明な背景
- 青色の文字
- 青色の下線

## ホバー時
- 文字色が少し濃い青に変化
- 下線が一瞬縮小して元に戻るアニメーション
- 滑らかな動きで親しみやすい印象

このリンクの特徴

縮小アニメーション 下線が一瞬小さくなることで視線を引きつける
軽快な動き 0.4秒の短いアニメーションで素早く反応
リズム感 通常→縮小→通常という3段階の変化でリズムを演出
用途カジュアルなサイトや親しみやすい印象を与えたい場合に最適

コードのポイント

scaleX()による縮小アニメーション:

.link-shrink::before {
    animation: shrinkUnderline 0.4s ease-in-out;
}

@keyframes shrinkUnderline {
    0%, 100% { transform: scaleX(1); }     /* 開始と終了は通常サイズ */
    50% { transform: scaleX(0.8); }        /* 中間点で40%に縮小 */
}

scaleX()でX軸方向(横方向)のみを拡大縮小
0%と100%で通常サイズ、50%で0.8倍に縮小
ease-in-outで加速・減速を制御し、自然な動きを実現
::before疑似要素で下線を作成し、本体には影響を与えない

2. 下線を一瞬大きくなるリンク

ホバー時に下線を一瞬拡大させて元に戻るエフェクト

HTML

<a href="#" class="link-expand">リンクテキスト</a>

CSS

.link-expand {
    display: inline-block;
    padding: 0.25rem 0;
    background: transparent;
    color: #2563eb;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    position: relative;
    transition: color 0.3s;
}

.link-expand::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2563eb;
}

.link-expand:hover::before {
    animation: pulseUnderline 0.4s ease-in-out;
}

.link-expand:hover {
    color: #1e40af;
}

@keyframes pulseUnderline {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(1.1); }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します:

a要素を使用して、強調感のあるリンクを作成してください。

## 初期状態
- 透明な背景
- 青色の文字
- 青色の下線

## ホバー時
- 文字色が少し濃い青に変化
- 下線が一瞬拡大して元に戻るアニメーション
- 強調効果で注目を集める

このリンクの特徴

拡大アニメーション 下線が一瞬大きくなることで強い存在感を演出
強調効果 1.3倍への拡大で「ここをクリック!」という印象を与える
パルス的な動き 脈打つような動きで視覚的なインパクト
用途重要なリンクやCTAに使用し、クリックを促進

コードのポイント

scaleX()による拡大アニメーション:

@keyframes pulseUnderline {
    0%, 100% { transform: scaleX(1); }     /* 開始と終了は通常サイズ */
    50% { transform: scaleX(1.1); }        /* 中間点で130%に拡大 */
}

scaleX(1.1)で横方向に10%拡大
拡大率が大きいため、より強い視覚的インパクト
縮小エフェクトと組み合わせて、コントラストのある表現が可能
同じease-in-outを使用し、滑らかな動きを実現

3. 下線が横方向に180度回転するリンク

ホバー時に下線が横方向に半回転するエフェクト

HTML

<a href="#" class="link-rotate">リンクテキスト</a>

CSS

.link-rotate {
    display: inline-block;
    padding: 0.25rem 0;
    background: transparent;
    color: #2563eb;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    position: relative;
    transition: color 0.3s;
}

.link-rotate::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2563eb;
}

.link-rotate:hover::before {
    animation: rotateUnderline 0.6s ease-in-out;
}

.link-rotate:hover {
    color: #1e40af;
}

@keyframes rotateUnderline {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します:

a要素を使用して、ユニークで印象的なリンクを作成してください。

## 初期状態
- 透明な背景
- 青色の文字
- 青色の下線

## ホバー時
- 文字色が少し濃い青に変化
- 下線が横方向に半回転（180度）するアニメーション
- 立体的で印象に残る動き

このリンクの特徴

3D回転 Y軸回転で立体的な動きを表現
ユニークな動き 他のリンクとは一線を画す個性的なエフェクト
視覚的驚き 回転する下線で「おっ」と思わせる
用途印象に残したい特別なリンクや、クリエイティブなサイトに最適

コードのポイント

rotateY()による3D回転:

@keyframes rotateUnderline {
    0% { transform: rotateY(0deg); }       /* 開始: 正面 */
    100% { transform: rotateY(180deg); }   /* 終了: 半回転後の裏面 */
}

rotateY()でY軸(縦軸)を中心に回転
0度から180度まで回転し、半回転して裏返る
3D変換により、下線が薄くなったり太く見えたりする立体効果
アニメーション時間は0.6秒で、回転の様子を十分に視認可能

4. 下線を1回点滅させるリンク

ホバー時に下線を1回点滅させて元に戻るエフェクト

HTML

<a href="#" class="link-blink">リンクテキスト</a>

CSS

.link-blink {
    display: inline-block;
    padding: 0.25rem 0;
    background: transparent;
    color: #2563eb;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    position: relative;
    transition: color 0.3s;
}

.link-blink::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2563eb;
}

.link-blink:hover::before {
    animation: blinkUnderline 0.6s ease-in-out;
}

.link-blink:hover {
    color: #1e40af;
}

@keyframes blinkUnderline {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します:

a要素を使用して、注意を引くリンクを作成してください。

## 初期状態
- 透明な背景
- 青色の文字
- 青色の下線

## ホバー時
- 文字色が少し濃い青に変化
- 下線が1回点滅するアニメーション
- シンプルで視線を引きつける動き

このリンクの特徴

点滅効果 1回の点滅でシンプルな注意喚起
明快な動き 消える→現れるというシンプルなリズム
ミニマルな表現 透明度の変化のみで実装されたシンプルな動き
用途重要なお知らせや期間限定リンクなど、特に注目させたい場合に使用

コードのポイント

opacityによる点滅アニメーション:

@keyframes blinkUnderline {
    0%, 100% { opacity: 1; }   /* 開始と終了: 表示 */
    50% { opacity: 0; }        /* 中間点: 非表示 */
}

opacityで透明度を制御し、表示/非表示を切り替え
シンプルな3つのキーフレームで1回の点滅を実現
0%→50%で消え、50%→100%で現れる
アニメーション時間0.6秒で、点滅を明確に視認可能

5. 下線に左から右へ光が流れるリンク

ホバー時に下線に沿って左から右へ光が流れるエフェクト

HTML

<a href="#" class="link-shine-left">リンクテキスト</a>

CSS

.link-shine-left {
    display: inline-block;
    padding: 0.25rem 0 0.375rem;
    background: linear-gradient(#2563eb, #2563eb) no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: color 0.3s;
}

.link-shine-left::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transition: left 0.5s;
}

.link-shine-left:hover::before {
    left: 100%;
}

.link-shine-left:hover {
    color: #1e40af;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します:

a要素を使用して、高級感のあるリンクを作成してください。

## 初期状態
- 透明な背景
- 青色の文字
- 青色の下線

## ホバー時
- 文字色が少し濃い青に変化
- 下線に沿って左から右へ光が流れるアニメーション
- キラッと光るプレミアムな効果

このリンクの特徴

光の流れ 左から右へ光が流れるキラキラ効果
プレミアム感 白い光のグラデーションで高級感を演出
linear-gradient下線 背景グラデーションで下線を作成し、その上に光を重ねる
用途プレミアムサービスや高級ブランドサイト、特別なキャンペーンページに最適

コードのポイント

linear-gradientとpositionによる光の流れ:

.link-shine-left {
    /* linear-gradientで下線を作成 */
    background: linear-gradient(#2563eb, #2563eb) no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;  /* 下端に配置 */
}

.link-shine-left::before {
    left: -100%;  /* 初期状態: 左外 */
    background: linear-gradient(90deg, 
        transparent,                    /* 左端: 透明 */
        rgba(255, 255, 255, 0.9),      /* 中央: 白い光 */
        transparent);                   /* 右端: 透明 */
}

.link-shine-left:hover::before {
    left: 100%;  /* ホバー時: 右外へ移動 */
}

linear-gradientで下線を作成し、::beforeで光を重ねる
border-bottomではなくbackgroundを使用することで、光が上に表示される
left: -100%からleft: 100%へ移動し、光が横切る
overflow: hiddenで光がリンクの外にはみ出さないようにする

6. 下線に左右から同時に光が流れるリンク

ホバー時に下線に左右から同時に光が流れるエフェクト

HTML

<a href="#" class="link-shine-dual">リンクテキスト</a>

CSS

.link-shine-dual {
    display: inline-block;
    padding: 0.25rem 0 0.375rem;
    background: linear-gradient(#2563eb, #2563eb) no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: color 0.3s;
}

.link-shine-dual::before,
.link-shine-dual::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transition: all 0.5s;
}

.link-shine-dual::before {
    left: -100%;
}

.link-shine-dual::after {
    right: -100%;
}

.link-shine-dual:hover::before {
    left: 100%;
}

.link-shine-dual:hover::after {
    right: 100%;
}

.link-shine-dual:hover {
    color: #1e40af;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します:

a要素を使用して、華やかで印象的なリンクを作成してください。

## 初期状態
- 透明な背景
- 青色の文字
- 青色の下線

## ホバー時
- 文字色が少し濃い青に変化
- 下線に左右から同時に光が流れるアニメーション
- 対称的でバランスの良い効果

このリンクの特徴

左右同時 両方向から光が流れる対称的な美しさ
華やかな効果 2つの光が同時に動くことで、より鮮やかな印象
複数の疑似要素 ::beforeと::afterを併用して実装
用途特別なイベントページや、豪華な印象を与えたいキャンペーンサイトに最適

コードのポイント

複数の疑似要素で左右同時移動:

.link-shine-dual::before {
    left: -100%;  /* 左側の光: 左外から開始 */
}

.link-shine-dual::after {
    right: -100%;  /* 右側の光: 右外から開始 */
}

.link-shine-dual:hover::before {
    left: 100%;  /* 左側の光: 右外へ */
}

.link-shine-dual:hover::after {
    right: 100%;  /* 右側の光: 左外へ */
}

::beforeと::afterで2つの光を作成
左側の光はleft、右側の光はrightで位置を制御
両方が同時に動き、中央ですれ違う
transition: all 0.5sで両方の動きを同期化

7. 下線が左から右へ出て右へ消えるリンク

ホバー時に下線が左から右へ伸びて止まり、マウスを離すと右へ消えるエフェクト

HTML

<a href="#" class="link-slide">リンクテキスト</a>

CSS

.link-slide {
    display: inline-block;
    padding: 0.25rem 0;
    background: transparent;
    color: #2563eb;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    position: relative;
    transition: color 0.3s;
}

.link-slide::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #2563eb;
    transition: width 0.5s ease-out;
}

.link-slide:hover::before {
    width: 100%;
}

.link-slide:not(:hover)::before {
    left: auto;
    right: 0;
    transition: width 0.5s ease-out;
}

.link-slide:hover {
    color: #1e40af;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します:

a要素を使用して、軽快でスムーズなリンクを作成してください。

## 初期状態
- 透明な背景
- 青色の文字
- 下線は非表示

## ホバー時
- 文字色が少し濃い青に変化
- 下線が左から右へ伸びて止まる

## ホバー解除時
- 下線が右側から縮み、右へ消える

このリンクの特徴

方向性のある動き 左から右へ伸び、右へ消える一方向の流れ
スムーズな入り退り ホバー時と解除時で異なる動き
軽快な印象 滑らかなスライド効果で現代的
用途ナビゲーションメニューやブログ記事リンクなど、一般的なリンクに広く使用可能

コードのポイント

widthとleft/rightの切り替え:

.link-slide::before {
    left: 0;
    width: 0;  /* 初期状態: 幅0 */
}

.link-slide:hover::before {
    width: 100%;  /* ホバー時: 左から右へ伸びる */
}

.link-slide:not(:hover)::before {
    left: auto;     /* leftを解除 */
    right: 0;       /* 右端を基準に */
    width: 0;       /* 右側から縮む */
}

ホバー時はleft: 0からwidth: 100%で左から伸びる
ホバー解除時はright: 0からwidth: 0で右から縮む
:not(:hover)でホバー解除状態をターゲット
leftとrightを切り替えることで、異なる方向の動きを実現

8. 下から現れる下線のリンク

ホバー時に下線が下から現れるエフェクト

HTML

<a href="#" class="link-rise">リンクテキスト</a>

CSS

.link-rise {
    display: inline-block;
    padding: 0.25rem 0;
    background: transparent;
    color: #2563eb;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    position: relative;
    transition: color 0.3s;
}

.link-rise::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2563eb;
    opacity: 0;
    transition: bottom 0.4s ease-out, opacity 0.4s;
}

.link-rise:hover::before {
    bottom: 0;
    opacity: 1;
}

.link-rise:hover {
    color: #1e40af;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します:

a要素を使用して、傑出した動きのリンクを作成してください。

## 初期状態
- 透明な背景
- 青色の文字
- 下線は非表示

## ホバー時
- 文字色が少し濃い青に変化
- 下線が下から浮かび上がって現れる
- 軽快で自然な動き

このリンクの特徴

垂直方向の動き 下から上へ浮かび上がるユニークな表現
透明度と位置の連動 opacityとbottomを同時に変化させて自然な出現
軽やかな印象 下からふわっと浮かぶ柔らかい動き
用途親しみやすいデザインや、柔らかい印象を与えたいサイトに最適

コードのポイント

bottomとopacityの同時変化:

.link-rise::before {
    bottom: -6px;  /* 初期状態: 6px下に配置 */
    opacity: 0;    /* 初期状態: 透明(非表示) */
    transition: bottom 0.4s ease-out, opacity 0.4s;
}

.link-rise:hover::before {
    bottom: 0;     /* ホバー時: 正しい位置へ */
    opacity: 1;    /* ホバー時: 不透明(表示) */
}

bottom: -6pxで下線を最初は下方に配置
opacity: 0で初期状態では非表示
ホバー時にbottom: 0で上へ移動し、opacity: 1で表示
位置と透明度を同時に変化させることで、浮かび上がる効果を実現

9. 左右から下線が流れて中央で結合するリンク

ホバー時に左右から下線が流れてきて中央で結合するエフェクト

HTML

<a href="#" class="link-meet">リンクテキスト</a>

CSS

.link-meet {
    display: inline-block;
    padding: 0.25rem 0;
    background: transparent;
    color: #2563eb;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    position: relative;
    transition: color 0.3s;
}

.link-meet::before,
.link-meet::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #2563eb;
    transition: width 0.5s ease-out;
}

.link-meet::before {
    left: 0;
}

.link-meet::after {
    right: 0;
}

.link-meet:hover::before,
.link-meet:hover::after {
    width: 50%;
}

.link-meet:hover {
    color: #1e40af;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します:

a要素を使用して、対称的で美しいリンクを作成してください。

## 初期状態
- 透明な背景
- 青色の文字
- 下線は非表示

## ホバー時
- 文字色が少し濃い青に変化
- 左右から同時に下線が伸びて中央で出会う
- 対称的でバランスの良い動き

このリンクの特徴

対称的な動き 左右から同時に伸びて中央で結合する美しいアニメーション
視覚的バランス 左右対称の動きで安定感を演出
結合の瞬間 中央で出会う瞬間が印象的
用途洗練されたデザインや、バランスを重視するサイトに最適

コードのポイント

複数の疑似要素で左右から伸びる:

.link-meet::before,
.link-meet::after {
    width: 0;  /* 初期状態: 幅0 */
}

.link-meet::before {
    left: 0;   /* 左端を基準に */
}

.link-meet::after {
    right: 0;  /* 右端を基準に */
}

.link-meet:hover::before,
.link-meet:hover::after {
    width: 50%;  /* 各々50%伸びて中央で結合 */
}

::beforeと::afterで2つの下線を作成
::beforeはleft: 0から右へ、::afterはright: 0から左へ伸びる
各々がwidth: 50%になることで、中央でちょうど出会う
transitionを同じ値にすることで、同期した動きを実現

10. 中央から左右に広がる下線のリンク

ホバー時に下線が中央から左右に広がるエフェクト

HTML

<a href="#" class="link-center">リンクテキスト</a>

CSS

.link-center {
    display: inline-block;
    padding: 0.25rem 0;
    background: transparent;
    color: #2563eb;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    position: relative;
    transition: color 0.3s;
}

.link-center::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #2563eb;
    transform: translateX(-50%);
    transition: width 0.5s ease-out;
}

.link-center:hover::before {
    width: 100%;
}

.link-center:hover {
    color: #1e40af;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します:

a要素を使用して、シンプルで洗練されたリンクを作成してください。

## 初期状態
- 透明な背景
- 青色の文字
- 下線は非表示

## ホバー時
- 文字色が少し濃い青に変化
- 下線が中央から左右に広がるアニメーション
- 滑らかで自然な動き

このリンクの特徴

中央起点 中央から外側へ広がるユニークな動き
シンプルで洗練 一般的な左からのスライドとは異なる印象
中心を強調 中央から広がることで、リンクテキストの中心に視線を誘導
用途ミニマルデザインや、モダンなサイトのナビゲーションに最適

コードのポイント

translateX()とwidthで中央起点の拡大:

.link-center::before {
    left: 50%;                    /* 中央に配置 */
    width: 0;                     /* 初期状態: 幅0 */
    transform: translateX(-50%);  /* 中央を中心に */
}

.link-center:hover::before {
    width: 100%;  /* ホバー時: 幅100%に拡大 */
}

left: 50%で要素を中央に配置
translateX(-50%)で要素自身の中心を中央に合わせる
width: 0からwidth: 100%へ変化し、中央を基準に左右に拡大
transformを維持したままwidthを変化させることで、中央起点の効果を実現

まとめ

下線だけでこんなに色々なエフェクトが作れるんですね！それぞれ印象が全然違って面白いです。

その通り。同じ下線でも、動きの種類によって与える印象が大きく変わるんだ。縮小や拡大は軽快、光の流れは高級感、スライドはスムーズさを演出できる。

linear-gradientで下線を作るのと、border-bottomで作るのとで違いがあるんですか？

いい着眼点だね。linear-gradientを使うと、その上に光のエフェクトを重ねられる。border-bottomだと、疑似要素が下線の下に隠れてしまうから、光のエフェクトが見えなくなってしまうんだ。

なるほど！だから光が流れるエフェクトだけlinear-gradientを使っているんですね。

そういうこと。技術的な制約を理解して、適切な実装方法を選ぶことが大切なんだ。これらのエフェクトを実際のプロジェクトで使ってみて、ユーザーの反応を見てみよう。

下線アニメーション活用のポイント

エフェクトの使い分け 軽快さ(縮小/拡大)、高級感(光の流れ)、スムーズさ(スライド)など、目的に応じて選択
linear-gradient vs border-bottom 光のエフェクトを重ねる場合はlinear-gradientで下線を作成
疑似要素の活用 ::beforeと::afterを使い分けて複雑な動きを実現
アニメーション時間 0.4〜0.6秒程度が適切。速すぎず遅すぎない
イージング関数 ease-in-outやease-outで自然な加速・減速を実現
対称性 左右対称の動きはバランスが良く、視覚的に安定感を与える
実践での検証 実際のプロジェクトで使用し、ユーザー体験を確認することが重要

次回は、ボタンの高度なホバーエフェクトについて学習します。

作成するリンクパーツ

1. 下線が一瞬小さくなるリンク

AIへのプロンプト例

このリンクの特徴

コードのポイント

scaleX()による縮小アニメーション:

2. 下線を一瞬大きくなるリンク

AIへのプロンプト例

このリンクの特徴

コードのポイント

scaleX()による拡大アニメーション:

3. 下線が横方向に180度回転するリンク

AIへのプロンプト例

このリンクの特徴

コードのポイント

rotateY()による3D回転:

4. 下線を1回点滅させるリンク

AIへのプロンプト例

このリンクの特徴

コードのポイント

opacityによる点滅アニメーション:

5. 下線に左から右へ光が流れるリンク

AIへのプロンプト例

このリンクの特徴

コードのポイント

linear-gradientとpositionによる光の流れ:

6. 下線に左右から同時に光が流れるリンク

AIへのプロンプト例

このリンクの特徴

コードのポイント

複数の疑似要素で左右同時移動:

7. 下線が左から右へ出て右へ消えるリンク

AIへのプロンプト例

このリンクの特徴

コードのポイント

widthとleft/rightの切り替え:

8. 下から現れる下線のリンク

AIへのプロンプト例

このリンクの特徴

コードのポイント

bottomとopacityの同時変化:

9. 左右から下線が流れて中央で結合するリンク

AIへのプロンプト例

このリンクの特徴

コードのポイント

複数の疑似要素で左右から伸びる:

10. 中央から左右に広がる下線のリンク

AIへのプロンプト例

このリンクの特徴

コードのポイント

translateX()とwidthで中央起点の拡大:

まとめ

学習チェック