この記事では、主に 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は擬似クラスタグを使用してアニメーション効果を実装します { 位置: 相対的; フォントの太さ: 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 を応援していただければ幸いです。 |
>>: 固定、流動的、柔軟なウェブページレイアウトの長所と短所の分析
目次1. Dockerはリモートアクセスを可能にする2. Intellij IDEAにDockerプ...
一部の障害コード テーブルでは、履歴またはパフォーマンス上の理由から、次の設計パターンが使用されます...
tomcatの設定1. 実行構成をクリック 2. tomcat localを選択 3. tomcat...
実験コードは次のとおりです。 </head> <body> <div ...
準備する:教師テーブルと生徒テーブルを定義し、生徒テーブルで教師テーブルIDを参照します。テーブルt...
導入: AD は Active Directory の略称で、中国語では Active Direct...
この記事の例では、右上隅の時間表示のリアルタイム更新を実現するためのVueの具体的なコードを紹介しま...
スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...
<br />テーブルは、昔から誰もが使ってきたタグで、今も使われています。しかし、現在の...
1. はじめに最近、開発者が誤ってデータを削除したり更新したりするケースがよくあります。今回もまた問...
目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...
目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...
memcachedをインストールする yum インストール -y memcached #memcac...
この記事の例では、両端キューを実装するためのJavaScriptの具体的なコードを参考までに共有して...
会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...