前の 2 つの章を終えて、ボタンのフローティング アニメーションについて新たな理解が得られましたか? 前の 2 つの章では主に背景に焦点を当てましたが、この章では境界のアニメーション効果に焦点を当てます。この章 (ボタン グループ: 興味深い CSS ボタン アニメーション、CSS の世界へご案内) はここで終了します。最初の 3 つのセクションは、この章の最後に要約されます。 このセクションのトピックを続けましょう。まずはエフェクトの例を見てみましょう。 最初の 2 つのセクションを読んだ友人は、実装方法を知るために以下のソース コードを見る必要はないかもしれません。まず自分で試してみてから、戻って見てください。実装方法は異なるかもしれませんが、実装できる限り、すべて良い方法です。 次の例は、 例1 <button class="btn-1">ボタン 1</button> <スタイル> ボタン{ 位置: 相対的; 幅: 100ピクセル; 高さ: 40px; 背景: なし; カーソル: ポインタ; 色: #fff; 境界線: なし; 右マージン: 20px; 下マージン: 20px; } ボタン:前、 ボタン:後{ 位置: 絶対; コンテンツ: ''; 幅: 100%; 高さ: 100%; zインデックス: 10; 遷移: すべて .5 秒; } /* ボタン 1 */ .btn-1:前、.btn-1:後{ 高さ: 2px; 左: 50%; 幅: 0; 背景: #f13f84; 変換: translateX(-50%); } .btn-1:前{ 上: 0; } .btn-1:後{ 下部: 0; } .btn-1:hover:before, .btn-1:hover:after{ 幅: 100%; } </スタイル> 分析: 1. 2. 絶対配置の効果により、 例2 <button class="btn-2">ボタン 2</button> <スタイル> ... /* 上記の共通スタイルはここでは省略します*/ .btn-2{ 背景: #333; 高さ: 36px; } .btn-2:前、 .btn-2:後{ 幅: 10px; 高さ: 10px; 背景: #f13f84; ミックスブレンドモード: 色相; } .btn-2:前{ 左: -2px; 上: -2px; } .btn-2:後{ 右: -2px; 下: -2px; } .btn-2:hover:before, .btn-2:hover:after{ 高さ: calc(100% + 4px); 幅: calc(100% + 4px); } </スタイル> 分析: 1. 2. calc() 関数は長さの値を動的に計算するために使用されます。 ● 演算子の前後にはスペースが必要であることに注意してください。例: ● 任意の長さの値は ● ● 3. 上の図では、プロパティ CSS3
色相モード 「色相」モードでは、彩度と明度の値を変更せずに、「混合色」の色相値のみを使用して着色します。 ここでは 例3 <ボタン class="btn-3"> <span>ボタン 3</span> </ボタン> <スタイル> ... /* 上記の共通スタイルはここでは省略します*/ ボタン スパン:前、 ボタン span:after{ 位置: 絶対; コンテンツ: ''; 幅: 100%; 高さ: 100%; zインデックス: 10; 遷移: すべて .5 秒; } .btn-3{ 背景: #333; 高さ: 36px; } .btn-3:前、 .btn-3:後、 .btn-3 span:before, .btn-3 span:after{ 幅: 10px; 高さ: 10px; 背景: #f13f84; ミックスブレンドモード: 色相; } .btn-3:前{ 左: -2px; 上: -2px; } .btn-3:後{ 右: -2px; 上: -2px; } .btn-3 span:before { 左: -2px; 下: -2px; } .btn-3 span:after { 右: -2px; 下: -2px; } .btn-3:hover:before, .btn-3:hover:after, .btn-3:ホバー スパン:前, .btn-3:hover span:after { 高さ: 60%; 幅: 60%; } 分析: 1. 例3は例2のアップグレード版で、span疑似クラスを使用してボタンの4隅を改善しています。 2. 例4 <button class="btn-4">ボタン 4</button> <スタイル> ... /* 上記の共通スタイルはここでは省略します*/ .btn-4{ 高さ: 34px; 境界線: 1px 実線 #f13f84; } .btn-4:前、 .btn-4:後{ 幅: 10px; 高さ: 10px; 境界線のスタイル: solid; 境界線の色: #f13f84; } .btn-4:前{ 左: -4px; 上: -4px; 境界線の幅: 1px 0 0 1px; } .btn-4:後{ 右: -4px; 下: -4px; 境界線の幅: 0 1px 1px 0; } .btn-4:hover:before, .btn-4:hover:after{ 高さ: calc(100% + 7px); 幅: calc(100% + 7px); } 分析: 1. 例4は例2の別の実装ですが、ボタンに境界線が追加されている点が異なります。 2. 幅: 10px; 高さ: 10px; 境界線のスタイル: solid; 境界線の色: #f13f84; 境界線の幅: 1px 0 0 1px; 3. 次に 例5 <button class="btn-5">ボタン 5</button> <スタイル> ... /* 上記の共通スタイルはここでは省略します*/ .btn-5{ 背景: #333; 高さ: 34px; 境界線: 1px 実線 #fff; } .btn-5:前、 .btn-5:後{ 幅: 10px; 高さ: 10px; 境界線のスタイル: solid; 境界線の色: #fff; } .btn-5:前{ 左: -4px; 上: -4px; 境界線の幅: 1px 0 0 1px; } .btn-5:後{ 右: -4px; 下: -4px; 境界線の幅: 0 1px 1px 0; } .btn-5:ホバー{ 境界線の色: #f13f84; } .btn-5:hover:before, .btn-5:hover:after{ 高さ: calc(100% + 7px); 幅: calc(100% + 7px); 境界線の色: #f13f84; 変換: rotateY(180deg); } 分析: 1. 例 5 は例 4 と 2 つの違いしかありません 境界線の色: #f13f84; 変換: rotateY(180deg); 例6 <ボタン class="btn-6"> <span>ボタン 6</span> </ボタン> <スタイル> ... /* 上記の共通スタイルはここでは省略します*/ .btn-6{ オーバーフロー: 非表示; } .btn-6:前、 .btn-6:後、 .btn-6 span:before, .btn-6 span:after{ 背景: 線形グラデーション(右へ、rgba(0,0,0,0)、#f13f84); 遷移: すべて 2; } .btn-6:前、 .btn-6:後{ 幅: 100%; 高さ: 1px; } .btn-6:前{ 上: 0; 左: -100%; } .btn-6:後{ 下部: 0; 右: -100%; } .btn-6 span:before、.btn-6 span:after{ 幅: 1px; 高さ: 100%; } .btn-6 span:before { 下部: -100%; 左: 0; } .btn-6 span:after { 上: -100%; 右: 0; } .btn-6:hover:before{ アニメーション: topA 1s 線形無限; アニメーション遅延: .5秒; } @keyframes topA{ 100%{ 左: 100%; } } .btn-6:hover span:after{ アニメーション: rightA 1s 線形無限; アニメーション遅延: 1秒; } @keyframes 右A{ 100%{ 上: 100%; } } .btn-6:hover:after{ アニメーション: bottomA 1s 線形無限; アニメーション遅延: 1.5秒; } @keyframes 下部A{ 100%{ 右: 100%; } } .btn-6:hover span:before { アニメーション: 左A 1秒 線形無限; アニメーション遅延: 2秒; } @keyframes 左A{ 100%{ 下部: 100%; } } 分析: 1. 例 6 は例 3 と少し似ていますが、アップグレード版です。 2. また、ボタンの上、右、下、左の位置に分散された4つの擬似クラスを通じて、上と下の擬似クラスの高さは1px、幅は100%、左と右の擬似クラス幅は1px、高さは100%、背景は線形グラデーション 3. アニメーションの遅延時間を適切に調整する必要があることに注意することが重要です。そうしないと、スムーズに表示されず、接続に問題が生じます。 例7 <ボタン class="btn-7"> <svg 高さ="100%" 幅="100%" xmlns="http://www.w3.org/2000/svg"> <rect class="outline" 高さ="100%" 幅="100%" /> <div class="text">ボタン 7</div> </svg> </ボタン> <スタイル> ... /* 上記の共通スタイルはここでは省略します*/ .btn-7{ 位置: 相対的; 色: #f13f84; テキスト装飾: なし; 幅: 250ピクセル; 高さ: 50px; マージン: 50px 自動; オーバーフロー: 非表示; } .btn-7 .outline { 位置: 絶対; 上: 0; 左: 0; 幅: 100%; 高さ: 100%; ストローク: #f13f84; ストローク幅: 2px; 塗りつぶし: 透明; ストロークダッシュ配列: 100 500; ストロークダッシュオフセット: 225; 遷移: すべて .5 秒; ボックスのサイズ: 境界線ボックス; } .btn-7 .text { 位置: 相対的; 上: -35px; 行の高さ: 1; 文字間隔: 1px; テキスト変換:大文字; } .btn-7:ホバー .outline{ ストロークダッシュ配列: 600 0; ストロークダッシュオフセット: 475; } 分析: 1. 例7はすべてを選択する方法です。svg 2. svg要素の説明
3. svg属性の説明
詳細については、後ほど特別章を設けます。 要約する この章(ボタン グループ: 興味深い CSS ボタン アニメーション、CSS の世界へご案内)はここで終了します。まずは、応援していただきありがとうございました。 この章から何を学びましたか? 1. アイデア、各セクション、例は簡単なものから難しいものまで、段階的に説明されています。 2. CSS疑似要素の使用 3. HTML要素のレイアウト、要素の水平および垂直の中央揃え 4. 5. CSS3 線形グラデーションと放射状グラデーション 6. 相対位置と絶対位置の柔軟な使用 7. 要素の移動、変形、回転など |
<<: iframe テクニックを使用して訪問者 QQ 実装のアイデアとサンプル コードを取得する
>>: MySQL スレーブ ライブラリ Seconds_Behind_Master 遅延の概要
NGINX の全体的なアーキテクチャは、連携して動作する一連のプロセスによって特徴付けられます。メイ...
目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....
1. 子コンポーネントのthis.$parent.eventを通じて親コンポーネントメソッドを直接呼...
1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...
Ubuntu に jdk をインストールする: [リンク] UbuntuにEclipseをインストー...
目次概要例1) オブジェクトをフリーズする2) 配列をフリーズする3) 浅い凍結4) ディープフリー...
SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...
1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用で...
HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...
質問アップロードするファイルのタイプを accept に追加することは、「表面的な」役割しか果たしま...
<br />思想が東西に分かれていた時代、東洋の叡智を代表するものの一つとして「禅」は多...
この記事では、絵文字用の MySQL Java サーバーのサポートと問題解決方法について説明します。...
プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...
HTML は、World Wide Web 上で公開するために使用されるハイブリッド言語です。 XH...
オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...