中国初のカッター github.com/chokcoco まず、ここに画像があります。純粋な CSS を使用して次の効果を作成するにはどうすればよいでしょうか? 読み続ける前に、少し時間を取ってください。上記の効果について考えたり、自分で試してみたりして、JS の助けを借りずに上記の効果を巧みに実現できるかどうかを確認してください。 はい、続けます。この影響は、私がビジネス開発の過程で遭遇した同様の小さな問題です。実際、Javascript を使うように言われたとしても、私の第一反応は「とても面倒だ」ということになるでしょう。そこで、CSS のみを使用してこの効果を実現することは可能かどうか疑問に思いました。 要件の定義 次の要件を持つ簡単なルールを定義しましょう。 HTML 構造が次のようになっていると仮定します。 <ul> <li>素晴らしい CSS</li> <li>ナビゲーション バー</li> <li>カーソルの小さな下線が続きます</li> <li>純粋な CSS</li> <li>ナビゲーションの下線</li> </ul>
実現要件 最初にこの効果を見たとき、次のアニメーションは CSS だけでは実現不可能だと感じました。 CSS のみで実現したい場合は、別の方法を見つけて、いくつかのトリッキーな方法を使用するしかありません。 さて、いくつかのトリックと CSS を使用して、この効果を段階的に実現してみましょう。困難を分析する: 幅は固定されていない 最初の難点は、 各 li { 下境界線: 2pxsolid#000; } つまり、今は次のようになります (li は互いに接続され、li 間のギャップは もちろん、最初はアンダースコアがないので、それを非表示にする必要があるかもしれません。 li { 下境界線: 0pxsolid#000; } 疑似要素でやり直す これは機能していないようです。非表示にした後、 li::before { コンテンツ: ""; 位置: 絶対; 上: 0; 左: 0; 幅: 100%; 高さ: 100%; 下境界線: 2pxsolid#000; } アニメーションの最初のステップを考えてみましょう。マウスをホバーすると、下線が移動して片側から拡大します。したがって、絶対位置指定を使用して、 li::before { コンテンツ: ""; 位置: 絶対; 上: 0; 左: 0; 幅: 0; 高さ: 100%; 下境界線: 2pxsolid#000; } li:hover::before { 幅: 100%; } 以下の結果が得られます。 よし、成功に一歩近づいたような気がする。今、私たちは最も難しい問題に取り組まなければなりません。 ナビゲーションの左の 現在の効果を詳しく見てみましょう。 最初の li::before { コンテンツ: ""; 位置: 絶対; 上: 0; 左: 100%; 幅: 0; 高さ: 100%; 下境界線: 2pxsolid#000; } li:hover::before { 左: 0; 幅: 100%; } 効果をご覧ください: さて、2 枚の写真を注意深く比較すると、2 番目の効果は実際にはゴマを拾い、スイカを失うことです。最初の したがって、現在のホバー そうです、ここでは 現在ホバーされている li::before { コンテンツ: ""; 位置: 絶対; 上: 0; 左: 100%; 幅: 0; 高さ: 100%; 下境界線: 2pxsolid#000; 遷移: 0.2salllinear; } li:hover::before { 幅: 100%; 左: 0; } li:hover~li::before { 左: 0; } この時点で、望んでいた効果が達成されました!花を撒きます。見てみましょう: 効果は良いですが、少し硬いです。イージング関数を適切に変更し、アニメーション遅延を追加することで、上記の効果を実現できます。もちろん、これらは単なる付加価値に過ぎません。 完全なデモは、こちらでご覧いただけます: CodePen --Demo やっと この方法の最大の欠点は、最初の li を入力するときに、行が右から左にしか進まないことです。これを除けば、次の効果は非常にうまく達成できます。 長い間更新していませんでした。最近は、イーサリアムプログラミング、スマートコントラクトの記述など、ブロックチェーン関連の技術の学習に夢中になっています。今後も自分の分野にもっと力を入れ、フロントエンドの記事をもっと書いていきたいと思います。CSS の魅力はまだまだ尽きません。 素晴らしい CSS 技術記事が私の Github -- iCSS に集められています。これらは継続的に更新されています。星をクリックして購読し、収集してください。 要約する 上記は、私が紹介した素晴らしい CSS ナビゲーション バーの下線付き効果です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: HTML と埋め込み Flash の両方におけるスクロールバーの分析と処理
1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...
MySQL インストール パッケージをダウンロードします。mysql-8.0.11-winx64 を...
最近、goaccess を使って nginx ログを分析したいのですが、nginx ログの設定形式が...
IDC のサーバーの /partition 使用率がいっぱいです。 100% に到達しました!確認し...
現在、ほぼすべての大規模な Web サイトとアプリケーションは分散方式で展開されています。分散シナリ...
Taobao用の空白スペースを作成します。 ブラウザページを縮小すると、コンテンツ領域は縮小されませ...
あなたも私と同じように、コンピューターのファイルを整然と整理し、不要なファイルを適宜削除するプログラ...
MySQL の一般的なシナリオ: 2 つのデータ セットの交差と差を取得するステップ1. 2つのコレ...
目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 パーレル # # https:/...
「大河は東に流れ、波は歴代の英雄たちを洗い流した。古城の西側は三国時代の周朗の赤壁だと言われている...
組織内で何らかのパスワード ポリシーがすでに実装されている場合は、この記事を読む必要はありません。た...
目次2. カンマ演算子3. JavaScript Null 結合演算子 (??) 4. JavaSc...
Vueでは、ローカルコンポーネントを自分で定義(登録)することができます。コンポーネント名を定義する...
仮想マシン内のUbuntu 18.04がネットワークに接続できない問題の解決策は次のとおりですVMw...