CSS と JS を使用して下線効果を実装する方法の例

この記事では、主に 2 種類の下線の動的効果について説明します。1 つ目は、ホバーすると X 軸が内側から外側に拡大してアニメーション効果を実現するものです。2 つ目は、左から右、または右から左に自動的に表示されるものです。！

主な効果は、疑似クラスタグ、ホバー、トランジションを使用してアニメーション効果を実現することです。

x軸は内側から外側に広がる

水平線のアニメーションはベジェ曲線を使用して実現します。具体的なコードは次のとおりです。

ul {
  ディスプレイ: フレックス;
  パディング: 0;
  マージン: 0;
  リストスタイルタイプ: なし;
}
ul:hover li:not(:hover) {
  不透明度: 0.2;
}
ul li {
  位置: 相対的;
  パディング: 30px 25px 30px 25px;
  カーソル: ポインタ;
}
ul li::after {
  位置: 絶対;
  コンテンツ： "";
  上: 100%;
  左: 0;
  幅: 100%;
  高さ: 2px;
  背景: #3498db;
  変換: scaleX(0);
  遷移: 0.4秒 キュービックベジェ(0.165, 0.84, 0.44, 1);
}
ul li:hover::after、ul li.active::after {
  変換: scaleX(1);
}

左右の水平下線アニメーション効果

主にjsを使ってマウスが離れたときの位置を判定し、左右に動かすことでアニメーション効果を表示します

js コードは次のとおりです。

document.querySelectorAll('a').forEach(要素 => {

  要素.onmouseenter =
  elem.onmouseleave = e => {

    定数許容値 = 5;

    定数左 = 0;
    const right = elem.clientWidth;

    x = e.pageX - elem.offsetLeft とします。

    (x - 許容値 < 左) の場合、x = 左;
    (x + 許容値 > 右) の場合、x = 右;

    elem.style.setProperty('--x', `${x}px`);

  };

});

CSSは擬似クラスタグを使用してアニメーション効果を実装します
CSS コードは次のとおりです。

{
  位置: 相対的;
  フォントの太さ: 600;
  テキスト装飾: なし;
  色: rgba(0, 0, 0, 0.4);
  トランジション: color .3s イーズ;
}
a::after {
  --スケール: 0;
  コンテンツ： '';
  位置: 絶対;
  左: 0;
  右: 0;
  上: 100%;
  高さ: 3px;
  背景: #4c81c9;
  -webkit-transform: scaleX(var(--scale));
          変換: scaleX(var(--scale));
  -webkit-transform-origin: var(--x) 50%;
          変換元: var(--x) 50%;
  遷移: -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
  遷移: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
  遷移: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
}
ホバー{
  色: #4c81c9;
}
ホバー後{
  --スケール: 1;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: Navicat 接続 MySQL エラーの説明分析

>>: 固定、流動的、柔軟なウェブページレイアウトの長所と短所の分析