マウスオーバーボタンアニメーションを実現する純粋な CSS3 パート 2

マウスオーバーボタンアニメーションを実現する純粋な CSS3 パート 2

前の 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. :before上は 0、 :after下は 0、高さheight: 2px 、幅は 0、水平方向中央揃え

2. 絶対配置の効果により、 :hover :before:afterの幅を変更して、上記の効果を実現します。

例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. :before:after 、ボタンから2px外側

2. :hover :before:afterの幅と高さを変更します。ここでは、幅と高さにcalc()を使用します。

calc() 関数は長さの値を動的に計算するために使用されます。

● 演算子の前後にはスペースが必要であることに注意してください。例: width: calc(100% - 10px) ;

● 任意の長さの値はcalc()関数を使用して計算できます。

calc()関数は、「+」、「-」、「*」、「/」演算をサポートします。

calc()関数は標準的な数学演算の優先順位規則を使用します。

3. 上の図では、プロパティmix-blend-modeが特別に操作されていることに気付いたかもしれません。ここでのその機能は、ボタンの背景を:before:after背景色の上に表示することです。

CSS3 mix-blend-mode構文

mix-blend-mode:normal | 乗算 | スクリーン | オーバーレイ | 暗くする | 明るくする | 覆い焼きカラー | 焼き込みカラー | ハードライト | ソフトライト | 差異 | 除外 | 色相 | 彩度 | 色 | 明度

色相モード 「色相」モードでは、彩度と明度の値を変更せずに、「混合色」の色相値のみを使用して着色します。

ここではmix-blend-modeについて詳しく説明しません。後で 1 章を割いて詳しく説明する予定です。

例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. :hover 4 つの疑似クラスの幅と高さを変更するだけです。

例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. backgroundを使用して対角線スタイルを表示する代わりに:before:after使用してborderを直接設定します。

幅: 10px;
高さ: 10px;
境界線のスタイル: solid;
境界線の色: #f13f84;
境界線の幅: 1px 0 0 1px;

3. 次に:hover

例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 つの違いしかありません:hoverの場合、疑似クラスは 180° 回転し、境界線の色を変更します。

境界線の色: #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%、背景は線形グラデーションlinear-gradientに設定されます。

3. :hoverの場合、上の疑似クラスは左の -100% の位置から左の 100% の位置に移動し、右の疑似クラスは上の -100% の位置から上の 100% の位置に移動し、下の疑似クラスは右の -100% の位置から右の 100% の位置に移動し、左の疑似クラスは下の -100% の位置から下の 100% の位置に移動します。次に、アニメーションを実行するための遅延を設定します。

アニメーションの遅延時間を適切に調整する必要があることに注意することが重要です。そうしないと、スムーズに表示されず、接続に問題が生じます。

例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要素の説明

<text>要素はテキストを定義するために使用されます

<rect>長方形の形状を定義します (円<circle> 、楕円<ellipse> 、線<line> 、ポリライン<polyline> 、多角形<polygon> 、パス<path> )

3. svg属性の説明

stroke線、テキスト、要素のアウトラインの色を定義します

stroke-widthプロパティは、線、テキスト、または要素のアウトラインの太さを定義します。

stroke-dasharray属性は、ストロークの点線のパターンを設定するために使用されます。実線と破線の幅を設定します。つまり、線分の長さの有無です。

stroke-dashoffsetダッシュパターンからパスの始点までの距離を指定します。

詳細については、後ほど特別章を設けます。

要約する

この章(ボタン グループ: 興味深い CSS ボタン アニメーション、CSS の世界へご案内)はここで終了します。まずは、応援していただきありがとうございました。

この章から何を学びましたか?

1. アイデア、各セクション、例は簡単なものから難しいものまで、段階的に説明されています。

2. CSS疑似要素の使用:before:after

3. HTML要素のレイアウト、要素の水平および垂直の中央揃え

4. transitionanimationの違いは何ですか?(答えを知りたい場合は、エディターの過去の記事を読むことができます)

5. CSS3 線形グラデーションと放射状グラデーション

6. 相対位置と絶対位置の柔軟な使用

7. 要素の移動、変形、回転などtransform

これで、マウス ロールオーバー ボタン アニメーションの純粋な CSS3 実装に関するこの記事の 2 番目のセクションは終了です。CSS3 マウス ロールオーバー ボタン アニメーションに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<:  iframe テクニックを使用して訪問者 QQ 実装のアイデアとサンプル コードを取得する

>>:  MySQL スレーブ ライブラリ Seconds_Behind_Master 遅延の概要

推薦する

nginx がどのようにして高いパフォーマンスとスケーラビリティを実現するのかを深く理解する

NGINX の全体的なアーキテクチャは、連携して動作する一連のプロセスによって特徴付けられます。メイ...

MySQL 主キー ID を生成する方法 (自己増分、一意、不規則)

目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....

Vueの子コンポーネントが親コンポーネントのメソッドを呼び出す場合の詳細な説明

1. 子コンポーネントのthis.$parent.eventを通じて親コンポーネントメソッドを直接呼...

よく使われるCSSカプセル化方法の概要

1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...

Ubuntu での MySQL および MySQL Workbench のインストール チュートリアル

Ubuntu に jdk をインストールする: [リンク] UbuntuにEclipseをインストー...

JS オブジェクト コンストラクター Object.freeze

目次概要例1) オブジェクトをフリーズする2) 配列をフリーズする3) 浅い凍結4) ディープフリー...

MySQL ステートメントの配置と概要の紹介

SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...

高速でクールな揺れアニメーション効果を実現するCSS

1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用で...

HTMLヘッダータグの使用に関する詳細な説明

HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...

Element-ui アップロードファイルのアップロード制限の解決策

質問アップロードするファイルのタイプを accept に追加することは、「表面的な」役割しか果たしま...

デザイン理論:人間中心のデザインコンセプト

<br />思想が東西に分かれていた時代、東洋の叡智を代表するものの一つとして「禅」は多...

絵文字と問題解決のためのMySQL/Javaサーバーサポートの詳細な説明

この記事では、絵文字用の MySQL Java サーバーのサポートと問題解決方法について説明します。...

MySQL で union all を使用してユニオンソートを取得する方法

プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...

W3C チュートリアル (3): W3C HTML アクティビティ

HTML は、World Wide Web 上で公開するために使用されるハイブリッド言語です。 XH...

Maven で tomcat8-maven-plugin プラグインを使用する詳細なチュートリアル

オンラインで多くの記事を検索しましたが、解決策は見つかりませんでした。次のように、tomcat7-m...