中国初のカッター 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 の両方におけるスクロールバーの分析と処理
カスタムパラメータを渡すだけhtml <div id="アプリ"> ...
まず、transform-origin 属性を使用する必要があります。transform 属性は必ず...
1. 全体的な手順冒頭で、RabbitMQ サービスをインストールして実行する方法を紹介しましたが、...
学ぶ内容1. ソフトウェアのインストールとサーバーの設定。 2. (オプションですが、強くお勧めしま...
目次序文接続管理追加の接続管理ポート要約する序文皆さんの多くは、次のようなエラー メッセージに遭遇し...
目次MySQL クライアント/サーバー プロトコルMySQL サーバーから高いパフォーマンスを得る必...
この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...
<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...
時々、選択した内容をグループ化する必要があります。以前はプログラム制御を使用していました。今日、se...
1. まず、純粋なHTMLファイルにはindex.htmlというエントリが必要です。 2. Tomc...
JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...
概要データベースは通常、複数のトランザクションを同時に実行します。複数のトランザクションが、同じデー...
MySql のウィンドウ関数を使用して統計データを収集する際に、小さな問題が見つかったので、それにつ...
nginx を導入した際に、フォワードプロキシの設定も nginx を使っていました。しかし、htt...
1. なぜパッケージングを行うのですか?全体的なコード呼び出し、リクエストの公開処理、パーソナライズ...