1. 遷移属性の理解 1. transition 属性は、次の 4 つの遷移プロパティを設定するために使用できる短縮属性です。 transition-property トランジション効果の CSS プロパティの名前 (高さ、幅、不透明度など)。 注意: transition-duration プロパティが 0 の場合、遷移効果は発生しません。 2. 勾配関数の値: グラデーション関数は遷移タイミング関数です。 ベジェ曲線のプリセット値 イージーは徐々に増加し、速度は一定、キュービックベジェは遅くなります (0.25、0.1、0.25、1) 3. 略語: transition: css 属性名 遷移時間 グラデーション関数値 遅延時間; 2. 簡単なアニメーション操作例 1. まず2枚の画像を挿入する <div class="A"> <img src="img/薬を飲む.jpg" alt=""> <img src="img/main_bg.jpg" alt=""> </div> 2. 画像のスタイルを設定する <スタイル> .A { マージン: 自動 100px; 高さ: 400px; 幅: 600ピクセル; 位置: 相対的; } .A 画像:n番目の子(1) { 高さ: 300px; 幅: 300ピクセル; 位置: 絶対; } .A 画像:n番目の子(2) { 高さ: 300px; 幅: 300ピクセル; 位置: 絶対; 遷移: 不透明度 3 秒、イーズイン 2 秒; } .A img:nth-child(2):ホバー{ 不透明度: 0; } 画像 { 高さ: 300px; 幅: 300ピクセル; } </スタイル> 3. 得られるアニメーション効果は次のとおりです。 要約する 以上は、エディターが紹介したシンプルな CSS アニメーションの transition 属性の詳細な説明です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: Windows で nginx を素早くインストールし、自動的に起動するように設定する
目次1. 重複したリクエストをキャンセルする2. すべてのリクエストをクリーンアップするこのソリュー...
FirefoxでBGMを再生するための推奨コードがテストに合格しました空のコントロールパネルを開いて...
1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...
原理ホバーしたときに要素に影を設定します: box-shadow で、通常とは異なるスタイルにします...
場合によっては、Windows システム上のプログラムを Linux 上でリモートで実行する必要があ...
前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...
HTML タグには、ページのタイトルを処理するための特別なタグがあります。これらは h1、h2、h3...
序文偶然、30 分の Tomcat セッション時間は、セッションが作成された後、30 分間のみ有効で...
序文プロジェクト内のパズルゲーム(デジタル華容路とも呼ばれる)を再構築するのに 2 日かかりました。...
目次序文計算されたプロパティ計算プロパティの紹介入門ケース統計価格事例ゲッターメソッドとセッターメソ...
UCenter Homeは、ComsenzがリリースしたSNSサイト構築システムです。最新バージョン...
目次1. 仲介業者モデル2. 例1. 見積コンポーネントに購入ボタンを追加する2. 親コンポーネント...
この記事では、主に 2 種類の下線の動的効果について説明します。1 つ目は、ホバーすると X 軸が内...
目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...
使用シナリオ:プロジェクトのページでは、頻繁に変更されず、個別のカスタマイズも伴わない大量のデータを...