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

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

推薦する

Intellij IDEA による Docker イメージの展開方法の手順の迅速な実装

目次1. Dockerはリモートアクセスを可能にする2. Intellij IDEAにDockerプ...

特定のシンボルで複数の行と列に分割するMySQLの例

一部の障害コード テーブルでは、履歴またはパフォーマンス上の理由から、次の設計パターンが使用されます...

Idea は、Web プロジェクトを開始するように Tomcat を設定します。グラフィック チュートリアル

tomcatの設定1. 実行構成をクリック 2. tomcat localを選択 3. tomcat...

ウェブページのコメントにより IE でテキストがオーバーフローする

実験コードは次のとおりです。 </head> <body> <div ...

MySQL 子テーブルで外部キー制約チェックを無効にする方法

準備する:教師テーブルと生徒テーブルを定義し、生徒テーブルで教師テーブルIDを参照します。テーブルt...

Windows Server 2016 AD サーバーをセットアップする手順 (画像とテキスト)

導入: AD は Active Directory の略称で、中国語では Active Direct...

Vueは右上隅の時間表示のリアルタイム更新を実装します

この記事の例では、右上隅の時間表示のリアルタイム更新を実現するためのVueの具体的なコードを紹介しま...

Vue のスロットの使用法と適用シナリオの詳細な分析

スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...

テーブルタグ(テーブル)詳細

<br />テーブルは、昔から誰もが使ってきたタグで、今も使われています。しかし、現在の...

MySQL で二重引用符の位置が誤っていたために起きた殺人事件の詳細な分析

1. はじめに最近、開発者が誤ってデータを削除したり更新したりするケースがよくあります。今回もまた問...

Vue.jsは背景テーブルコンポーネントのカプセル化を管理します

目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...

Dockerデーモンのセキュリティ設定項目の詳細な説明

目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...

NginxとLuaによるグレースケールリリースの実装

memcachedをインストールする yum インストール -y memcached #memcac...

JavaScriptは両端キューを実装する

この記事の例では、両端キューを実装するためのJavaScriptの具体的なコードを参考までに共有して...

アーティストの自己啓発におけるいくつかの経験

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...