1. CSS3アニメーション ☺CSS3 アニメーションは、JavaScript を介して要素のスタイルを動的に変更するよりもはるかに簡単で、パフォーマンスも優れています。 CSS3 には、 .transform-class { 変換: 回転(30度) スケール(2,3); } 1.1. transform-origin 基点 すべての変換は基点に基づいて行われ、デフォルトでは要素の中心点になります。使用法: .transform-class { 変換の原点: (左、下); } 1.2. rotate は指定された角度だけ要素を回転します。正の数の場合は時計回りに回転し、負の数の場合は反時計回りに回転します。 .transform-rotate{ 変換: 回転(30度); } 1.3. スケール .変換スケール{ 変換: スケール(2,1.5); } .transform-scaleX { 変換: scaleX(2); } .transform-scaleY { 変換: スケールY(1.5); } 1.4. 翻訳する .transform-translate { 変換: translate(400px, 20px); } .transform-translateX { 変換: translateX(300px); } .transform-translateY { 変換: translateY(20px); } 1.5. 歪曲収差 .transform-skew { 変換: skew(30deg, 10deg); } .transform-skewX { 変換: skewX(30deg); } .transform-skewY { 変換: skewY(10deg); } 1.6、マトリックス
3. アニメーション
例: @keyframes アニメーション名 { から { プロパティ: 値; } パーセンテージ プロパティ: 値; } に { プロパティ: 値; } } //または @keyframes アニメーション名 { 0% { プロパティ: 値; } パーセンテージ プロパティ: 値; } 100% { プロパティ: 値; } } 2. H5の新機能
フォーム コントロール: カレンダー、日付、時刻、電子メール、URL、検索。 ( CSS3アニメーションとHTML5の新機能に関するこの記事はこれで終わりです。CSS3アニメーションとHTML5の新機能に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 |
<<: js のループメソッドとさまざまなトラバーサルメソッド
>>: tomcat+nginx を使用してマルチアプリケーション デプロイメントを実装するためのサンプル コード
属性チェック-厳密公式ドキュメントでは、チェックボックスが表示されるときに親項目と子項目を互いに関連...
目次序文: 1. イベント ループとタスク キューの理由: 2. イベントループメカニズム: 3. ...
この問題について話すとき、垂直方向の中央揃えを設定するための vertical-align 属性が ...
序文Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソ...
Linux では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...
この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...
1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...
1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...
この記事では、例を使用して MySQL トリガーの構文とアプリケーションを説明します。ご参考までに、...
目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...
序文タイトルを見ると、誰もが「Debian 9 に MySQL をインストールするにはどうすればいい...
目次1. プラグイン式を使用する2. プラグイン式でv-cloakを使用してちらつきの問題を解決する...
フレームとは、Web ページ画面を複数のフレームに分割したもの(複数の Web ページという形で表示...
2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...
導入コンパイル、インストール、問題の解決後、Nginx は正常に動作していますが、現時点では Ngi...