1.移行 遷移プロパティの使用法: transition :transition-property transition-duration transition-timing-function 遷移遅延 一緒に指定することも、個別に指定することもできます transition-property: 遷移するプロパティ (幅、高さなど) です。all はすべてが変更されることを意味します。 transition-duration: 秒またはミリ秒単位での所要時間 transition-timing-function: アニメーションの種類 (モーション カーブ) を指定します。モーション カーブにはいくつかの種類があります。 easy=>徐々に減速(デフォルト値) linear=>一定速度 easy-in=>加速 easy-out=>減速 easy-in-out=>最初に加速してから減速 遷移遅延遅延時間(秒またはミリ秒) <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> <スタイル> div { 幅: 100ピクセル; 高さ: 200px; 背景色: 水色; 遷移: 幅 2 秒、イーズインアウト 0.5 秒。 } div:ホバー{ 幅: 500ピクセル; } </スタイル> </head> <本文> <div></div> </本文> </html> 結果は次のようになります。マウスを上に動かすと、変化は瞬時ではなくなり、過渡的に完了します。 2.変換 (1)2次元変形 (a) 移動 translate(x,y) 移動はピクセルまたはパーセンテージで指定できます。注: 指定されたパーセンテージはボックス自体のサイズのパーセンテージなので、ボックスを配置するときに中央揃えを設定するために使用できます (左: 50% に設定し、ボックス自体の -50% に移動します)。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="ビューポート" content="幅=, 初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> <スタイル> div { 幅: 100ピクセル; 高さ: 100px; 背景色: 水色; 遷移: すべて 2; } div:アクティブ{ 変換: translate(200px, 200px); } </スタイル> </head> <本文> <div></div> </本文> </html> クリックするとボックスが移動します。配置されたボックスを中央に配置するコードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> <スタイル> .fa { 幅: 300ピクセル; 高さ: 300px; 背景色: 水色; 遷移: すべて 0.5 秒; 位置: 相対的; } .息子{ 背景色: 赤; 位置: 絶対; 左: 50%; 上位: 50%; 幅: 100ピクセル; 高さ: 100px; 変換: translate(-50%, -50%); } </スタイル> </head> <本文> <div class="fa"> <div class="son"></div> </div> </本文> </html> 結果は (b) スケーリングスケール(x, y) x、y が 1 より大きい値に設定されている場合はズームインされ、1 より小さい値に設定されている場合はズームアウトされます。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> <スタイル> div { 幅: 100ピクセル; 高さ: 100px; 背景色: 水色; マージン: 200px 自動; 遷移: すべて 2; } div:ホバー{ 変換: スケール(0.5, 2); } </スタイル> </head> <本文> <div> </div> </本文> </html> (c) 回転(x度) x は度数値を指定します。正の値は時計回り、負の値は反時計回りになります。 回転の場合は、 transform-originを使用して回転の中心点を指定できます。また、左上、右上、下の特定のピクセル値を指定することもできます。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> <スタイル> div { 幅: 200ピクセル; 高さ: 100px; 背景色: 水色; マージン: 200px 自動; 遷移: すべて 2; 変換原点: 左下; } div:ホバー{ 変換: 回転(120度); } </スタイル> </head> <本文> <div></div> </本文> </html> (d) スキュー(x度、y度) x、y はそれぞれ x 方向と y 方向の傾斜角度を指定します。これは負の値になることもあります。 y 値が指定されていない場合、デフォルト値は 0 になります。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> <スタイル> div { 幅: 100ピクセル; 高さ: 100px; 背景色: 水色; 境界線: 1px 実線の赤; 遷移: すべて 1; マージン: 200px 自動; } div:ホバー{ 変換: skew(30deg, 20deg); } </スタイル> </head> <本文> <div></div> </本文> </html> (2)3D変形 (a) 回転 (rotateX、rotateY、rotateZ) 3D 回転は 2D と似ていますが、一方が 2 次元座標に基づいており、もう一方が 3 次元座標に基づいている点が異なります。 3 つの値は一緒に指定することも、個別に指定することもできます。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> <スタイル> div { 幅: 200ピクセル; 高さ: 100px; 背景色: 水色; マージン: 200px 自動; 遷移: すべて 2; 変換原点: 左下; } div:ホバー{ 変換: rotateX(120deg); /* 変換: rotateY(120deg); */ /* 変換: rotateZ(120deg); */ } </スタイル> </head> <本文> <div></div> </本文> </html> (b) 移動 (translateX、translateY、translateZ) 3D 移動は、xy 方向の移動に関しては 2D 移動と同じです。 Z方向の動きだけが異なります。 Z 方向への移動は、現実世界では距離が遠ざかったり近づいたりすることを意味します。そのため、Web ページに表示される結果は、近い場合は大きくなり、遠い場合は小さくなります。 Z 軸の動きを効果的にするには、まず視点 (目と画面の間の距離) を設定する必要があります。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> <スタイル> 体 { パースペクティブ: 1000px; /* 値が小さいほど、目が近くなります */ } div { 幅: 200ピクセル; 高さ: 200px; 背景色: 水色; 遷移: すべて 0.5 秒; マージン: 200px 自動; } div:ホバー{ 変換: translate3d(0, 0, 200px); } </スタイル> </head> <本文> <div> </div> </本文> </html> 3.アニメーション (1)アニメーション:アニメーション名 ||アニメーション継続時間 ||アニメーションタイミング関数 ||アニメーション遅延 ||アニメーション反復回数 ||アニメーション方向 ||アニメーション塗りつぶしモード; animation-name: アニメーション名(@keyframes を使って自分で定義したアニメーション) アニメーション期間: 期間 animation-timing-function: トランジションのモーション カーブに似たモーション カーブ。 アニメーション遅延: 遅延時間 animation-iteration-count: ループ回数(infinite は無限ループ) アニメーション方向: 逆方向かどうか (アニメーションが最後から始まって逆方向に再生されるかどうか) animation-fill-mode: アニメーション再生外の状態 (終了時の状態) を設定します。なし | 前進 (終了時の状態に設定) | 後退 (開始時の状態に設定) | 両方 (開始時または終了時の状態に設定) animation-play-state: アニメーションの状態を実行開始|一時停止に設定する (2) @keyframesカスタムアニメーション フォーマットは以下のとおりです @keyframes アニメーション名 { 開始から0% 100%まで } アニメーション処理を指定するには、from...to を使用するか、0%~100% を使用してアニメーション処理を指定できます。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ドキュメント</title> <スタイル> div { 幅: 100ピクセル; 高さ: 100px; 背景色: 水色; /* アニメーション: アニメーション名、アニメーション時間、モーション カーブ、開始タイミング、再生回数、逆方向に再生するかどうか*/ アニメーション: 5 秒間直線 3 で移動します。 } @keyframes 移動 { 0% { 変換: translate3d(0, 0, 0); } 25% { 変換: translate3d(400px, 0, 0); } 50% { 変換: translate3d(400px, 300px, 0); } 75% { 変換: translate3d(0, 300px, 0); } 100% { 変換: translate3d(0, 0, 0); } } </スタイル> </head> <本文> <div></div> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: dockerを使用してdubboプロジェクトをデプロイする方法
Vueはブール値でストレージを保存します今日、問題に遭遇しました。バックグラウンドから返された真偽の...
MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...
前回の記事では、Docker を使用して、コンパイルされた jar パッケージをイメージに組み込む ...
目次概要問題の説明循環リンクリスト順序付き配列数学的再帰要約する概要ジョセフ・リング問題は、ジョセフ...
背景事業が発展するにつれ、会社の事業内容や規模は拡大し続け、ウェブサイトには大量のユーザー情報やデー...
この記事では、jsとjQueryテクノロジーを使用して告白弾幕を実現する方法を紹介します。具体的な内...
ビジネスシナリオ: 訪問者の訪問状況を記録する必要があるが、繰り返し記録することはできない挿入する前...
目次1. インストール2. カプセル化に問題はない3. ファイルを作成する4. アドレス設定をリクエ...
この記事に誤りがあったり、ご提案がありましたら、お気軽にご連絡ください。よろしくお願いいたします。は...
div の背景を透明にする一般的な方法は 2 つあります。 1. 不透明度属性を 0 ~ 1 の値に...
css-vars-ポニーフィルCSS 変数を使用して Web ページのスキニングを実現すると、互換...
1. システムにログインし、ディレクトリに入ります: cd /etc/sysconfig/netwo...
ロゴの最適化: 1.ロゴ画像はできるだけ小さくしてください。 2. 一般的には背景として配置されます...
HTML の img タグで画像の中心を表示する方法は、現在 3 つあります。ここで記録しておきま...
公式サイトをダウンロード自分に合ったバージョンを選択してダウンロードしてください。 ダウンロードをク...