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

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 エラーの説明分析

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

推薦する

JavaScript クロージャの説明

目次1. クロージャとは何ですか? 2. クロージャの役割2.1) メモリ2.2) プライベート変数...

Vue3はJingdong製品詳細ページの虫眼鏡効果コンポーネントをカプセル化します

この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...

Tomcat+Mysql の高同時実行構成の最適化の説明

1.Tomcatの最適化構成(1)Tomcatのcatalina.batを変更するJavaをサーバー...

ログインボックスのメールプロンプトを実装するネイティブJS

この記事では、登録またはログイン時に電子メール アドレスを入力する際のドロップダウン プロンプトのネ...

ミニプログラムはミニプログラムクラウドを使用してWeChatの支払い機能を実装します

目次1. WeChat Payを開く1.1 アフィリエイト加盟店番号1.2 加盟店番号を追加する1....

LinuxでRPMを使用してmysql5.7.17をインストールする

LinuxでのMySQL5.7 rpmのインストール方法を参考までに記録します。具体的な内容は以下の...

ES6 Promiseの使い方の詳細な説明

目次約束とは何ですか?拒否の使用法キャッチの使い方すべての使用法レースの使用約束とは何ですか? Pr...

CenterOS7 インストールおよび構成環境 jdk1.8 チュートリアル

1. まずcenterosに付属のJDKをアンインストールします rpm-qa|grepopenjd...

MySQLクエリトランザクション処理へのノード接続の実装

目次トピックmysqlの追加、削除、変更、クエリを入力しますMySQL トランザクション処理私は M...

Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法

序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...

Linux が Sudo 権限昇格の脆弱性を公開、どのユーザーでも root コマンドを実行可能

Linux で最も一般的に使用される重要なユーティリティの 1 つである Sudo は、ほぼすべての...

ホストがアクセスできるようにMySQLの権限を変更する方法

mysqlのリモートアクセス権を有効にするデフォルトでは、MySQL ユーザーにはリモート アクセス...

MySQL 8の新機能におけるグローバルパラメータの永続性の詳細な説明

目次序文グローバルパラメータの永続性最後に要約する参考資料:序文2018 年に MySQL 8.0....

Linux で gdb を使用してコア ファイルをデバッグする方法

1.コアファイルプログラム実行中にセグメンテーション エラー (コア ダンプ) が発生すると、プログ...

Vue 構成リクエストの複数サーバーソリューションの詳細な説明

1. 解決策1.1 インターフェースコンテキストパスの説明2 つのバックエンド インターフェイス サ...