Wondershare EdrawMind
マインドマップギャラリー HTML5 CSS3のWebデザイン・制作
- 5
HTML5 CSS3のWebデザイン・制作
HTML5 CSS3 Webデザインと制作、水曜フロントエンド開発は初心者に適しています 第 1 章から第 4 章には、CSS の基本知識、水の基本概念、HTML、CSS の基本概念、Dreamweaver ツールの使用、HTML グラフィックおよびテキスト タグ、基本 CSS セレクターなどが含まれています。 第 5-8 章 ボックス モデル、リスト ハイパーリンク、テーブルとフォーム、DIV CSS レイアウト、およびその他のコア Web ページ制作 9-11章 HTML5、CSS3の新機能、マルチメディア埋め込み、トランジション、変形、アニメーション、描画など。 初心者でもWebデザインの基礎知識をすぐにマスターできるコンテンツです。
2021-06-28 16:26:54 に編集されました
- おすすめ
- アウトライン
HTML5 CSS3
ラベルの概要
タグの分類
その他
<b>/<strong>太字のテキスト
<u>/<ins>下線表示モード
<i>/<em>テキストは斜体で表示されます
<s>/<del> のテキストは取り消し線付きで表示されます
タイムタグ
時間
datetime は相対時間を定義します
pubdate発行日
ハイライト文字にマークを付ける
引用タグリファレンス
タイトルタグ
整列する
leftラベルを左揃えにします
センターセンターラベル
右揃えラベル
水平線ラベル
<時間>
align は配置を設定します (上記のラベル)
サイズの厚さ
色色
幅幅
オリジナルフォーマットタグ
<あたり>
改行タグ
<br/>
テキストラベル
フォント
顔のフォント
サイズ サイズ
色色
まとめ
嵐の大胆な エムティルト デルの取り消し線 イン下線
画像タグ
画像
ソースイメージパス
代替画像が表示されている場合はテキストを置換できません
タイトルポインタを重ねたときに表示される内容
width画像の幅
height画像の高さ
border は画像の境界線の幅を設定します
マージンは外側の境界線を設定します
内側の境界線のパディング
vspace は画像の下マージンと上マージンを設定します
hapace は画像の左右のマージンを設定します
整列する
left は画像を左に揃えます
右は画像を右に揃えます
top 画像の上部をテキストの最初の行に揃えます
middle は、画像の水平方向の中心線をテキストの最初の行に揃えます。 他のテキストは以下にあります
Bottom は、画像の下部をテキストの最初の行に揃えます。 他のテキストは画像の下にあります
初めてのCSS3入門
CSSのメリット
コストを節約する
性能を上げる
CSSの基本コア
ルール
セレクター {属性 1: 属性値 1; 属性 2: 属性値 2;....}
スタイルシートを導入する
列をなして
埋め込み
外部リンク
輸入品
基本的なセレクターはこれら 3 つで動作します
基本セレクター
タグセレクター
クラスセレクター
IDセレクター
ワイルドカードセレクター
ID>クラス>標準>ワイルドカード
テキストスタイルを設定する
テキストスタイルのプロパティ
フォントサイズ フォントサイズ
em 倍率 (現在のテキストに対する倍数)
pxピクセル
インチで
センチメートル
んー
ポイントポイント
フォントファミリーフォント
font-weight フォントの太さ
通常のデフォルト値
太字の太字
より太字でより太い文字
ライターは細いキャラクターを定義します
100～900で細い文字から太い文字まで自由に定義可能
フォントスタイル フォントスタイル
通常デフォルト
イタリック イタリック (テキスト自体が変更されます)
obliqueItalic 単語 (傾いていない単語を傾けます)
font：フォントスタイルの総合設定
@font-face ルール
テキストの外観プロパティ
色色
文字間隔: 単語の間隔
word-spacing: 単語の間隔 (英語のみに適用)
行の高さ: 行間隔
tex-transform: テキスト変換
どれも変換されません
大文字にする
小文字すべてを小文字に変換する
text-decoration: テキスト装飾
ノネノデコレーション
下線下線
下線
取り消し線
text-align: 水平方向の配置
左左揃え
右揃え右揃え
中央中央揃え
text-indent 最初の行のインデント
ホワイトスペース: ホワイトスペースの処理
普通普通
フォーマット済みのディスプレイごとにそのまま
大文字 すべてを大文字に変換します
nowrap スペースと改行は無効であり、テキストは強制的に改行されません。
text-shadow: 影効果
text-overflow: オブジェクト内のオーバーフローテキストをマークします
省略されたタグを表示せずにオーバーフローしたテキストをクリップトリムします
省略記号は、変更されたテキストを省略されたタグ「....」で置き換えます。
word-wrap は自動的に行を折り返す
Normal ではハイフネーションポイントでのみ改行が許可されます
Break-Word は、長い単語または URL アドレス内で改行します。
高度な機能
CSS複合セレクター
タグ固有のセレクター:
子孫セレクター
ユニオンセレクター
CSS カスケードと継承
積み重ね可能性
継承
CSSの優先度
CSS3セレクター
属性セレクター
E[att^=value] 属性セレクター (プレフィックス セレクター)
E[att$=value] 属性セレクター (サフィックス セレクター)
E[att$=value] 属性セレクター (付属)
Eはタグ名を表します att はセレクターを表します 値のプレフィックス サフィックス ラベル
関係セレクター
子要素セレクター: 要素の第 1 レベルの要素を選択します。
兄弟セレクター
近くの兄弟セレクター: 番号を使用して接続します
通常の兄弟セレクター: ~ を使用して前後にリンクします
構造化された疑似クラスセレクター
:root セレクター: ルート タグは常に html であり、すべてのページ タグに影響します。
:not セレクター: この構造要素の下にある部分構造要素を除外します
:only-child セレクター: 親要素の 1 つの子要素のみに一致します
:first-child セレクターと :last-child セレクター: 親要素内の最初と最後の子要素をそれぞれ選択します
:nth-child(n) および :nth-last-child(n) セレクター: 親オブジェクトの最後から n 番目の要素と n 番目の要素を選択します
:nth-of-type(n) および :nth-last-of-type(n) セレクター: 親オブジェクト内の特定の型の n 番目の要素と最後から 2 番目の n 番目の要素を選択します
:empty セレクター: 子要素を持たない要素、またはテキストの内容が空であるすべての要素を選択するために使用されます。
サブトピック
擬似要素セレクター
:疑似要素セレクターの前
:疑似要素セレクターの後
BOXボックスモデル
ボックスモデルを理解する
CSS はページ上のすべての要素を長方形のボックスに設定します 要素を長方形のボックスに設定すると、Web ページのレイアウトが崩れます。 同じボックスが別の場所に配置されている 各モデルは要素コンテンツ（content）、パディング（padding）、ボーダー（border）、マージン（margin）で構成されます。
ボックス関連のプロパティ
境界線のプロパティ
上の境界線
ボーダートップスタイルのスタイル。
border-top-width 幅;
ボーダートップカラーの色。
border-top: 幅のスタイルの色。
下の境界線
ボーダーボトムスタイルのスタイル。
border-bottom-width 幅;
border-bottom-color カラー;
border-bottom: 幅のスタイルの色。
左枠
ボーダー左スタイルのスタイル。
border-left-width 幅;
border-left-color カラー;
border-left: 幅のスタイルの色。
右枠
境界線右スタイルのスタイル。
border-right-width 幅;
border-right-color カラー;
border-right: 幅のスタイルの色。
包括的なスタイル設定
ボーダースタイル: 上 [右、下、左];
なし なし
実線: 単一の実線
破線: 破線
点線: 点線
double: 二重実線
幅の総合設定
border-width: 上 [右、下、左];
ピクセル値
カラー総合設定
境界線の色: 上 [右、下、左];
包括的な境界線設定
ボーダー: 4 辺の幅、4 辺のスタイル、4 辺の色。
パディングプロパティ
padding-top: 上マージン
padding-right: 右パディング
padding-bottom: 下部のパディング
padding-left: 左パディング
パディング: 上部パディング [右パディング、下部パディング、左パディング]
マージンのプロパティ
margin-top: 上マージン
margin-right: 右マージン
margin-bottom: 下マージン
margin-left: 左マージン
margin: 上マージン [右マージン、下マージン、左マージン]
背景のプロパティ
背景色: 背景色:
背景画像:背景画像:url()
背景画像のタイリング:background-repeat:property
タイルを水平方向と垂直方向に繰り返します
no-repeat ではタイル表示されません
水平方向に x 個のタイルを繰り返します
縦にyタイルを繰り返します
背景画像の位置: 背景位置: 右下;
背景画像を修正しました
背景添付: 属性;
ページの移動に合わせてスクロール画像も移動します
ページに固定された固定画像
背景要素の包括的なセット
背景: 背景色の URL (「画像」) タイルの位置が修正されました。
ボックスの幅と高さ
CSS3 は新しいボックス モデル属性を追加します
色の透明度
rgba (r, g, b, alpha) rgb は色の半分の比率を表します alpha はパラメータで、0.0 は完全に透明、1.0 は完全に不透明です。
不透明度: パラメータ; 0~1
丸い角
border-radius: 水平半径パラメータ 1 水平半径パラメータ 2 水平半径パラメータ 3 水平半径パラメータ 4/垂直半径パラメータ 1 垂直半径パラメータ 2 垂直半径パラメータ 3 垂直半径パラメータ 4;
ピクチャーボーダー
border-image-source は画像パスを指定します
border-image-slice は、境界線イメージの上、右、下、左の辺の内側へのオフセットを指定します。
border-image-width は境界線の幅を指定します
border-image-outset は、境界線の背景がボックスの外側まで伸びる距離を指定します
border-image-repeat は背景画像のタイリング方法を指定します
影
h-shadow は水平方向の影の位置を表し、負の値にすることができます (必須属性)
v-shadow は垂直影の位置を表し、負の値にすることもできます (必須属性)
ぼかしシャドウぼかし半径 (オプションのプロパティ)
スプレッドシャドウ拡張半径、負にすることはできません (オプションの属性)
colorShadow color (オプションの属性)
アウトセット/インセットのデフォルトは外側のシャドウ/内側のシャドウ (オプションの属性)
勾配
線形グラデーションの背景画像:線形グラデーション(グラデーション角度, カラー値 1, カラー値 2......, カラー値 n);
放射状グラデーション背景画像: 放射状 - グラデーション (グラデーション形状 4 つの中心位置、カラー値 1、カラー値 2。カラー値 m;
繰り返しの線形グラデーションの背景画像:repeat-linear-gradient(グラデーション角度、カラー値 1、カラー値 2...、カラー値 n);
放射状グラデーションを繰り返すbackground-image:repeatina-radial-aradient (グラデーション形状の円の中心位置、カラー値 1、カラー値 2...、カラー値 n);
複数の背景画像
背景画像をトリミングする
背景画像のサイズを設定します。background-size: 属性値 1 属性値 2;
背景画像の表示領域を設定します。background-origin: 属性値;
背景画像のクリッピング領域を設定します:background-clip
要素のタイプと変換
ブロック要素: <hl> ～ <h6>、<p>、<div> <hl>～<h6>、<ul>、<ol>、<li>
インライン要素: <strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<u>、<span> など。
divタグとspanタグ
div は Web ページの計画とレイアウトを実装します。
スパンは、特別に表示されるテキストをマークするためによく使用され、クラス属性とともに使用されます。
要素タイプの変換
一般的に使用される属性値と表示属性の意味は次のとおりです。
inline: この要素は inline 要素として表示されます (inline 要素のデフォルトの表示属性値)。 block: この要素はブロック要素として表示されます (ブロック要素のデフォルトの表示属性値)。 inline-block: この要素はインライン ブロック要素として表示され、幅、高さ、配置などの属性を設定できますが、要素は 1 行を占有しません。 none: この要素は非表示になり、表示されず、ページ領域を占有しません。これは、要素が存在しないことと同等です。
リストとハイパーリンク
リストタグ
順序付きリスト<ol>
<オル> <li>リスト項目 1</li> <li>リスト項目 2</li> <li>リスト項目 3</li> </ol>
タイプ: 属性値 (デフォルトは 1 つ)/a-A/i-I
開始番号 (箇条書きの開始値を指定します)
値の番号 (箇条書きを指定する番号)
順序なしリスト<ul>
<ul> <li>リスト項目 1</li> <li>リスト項目 2</li> <li>リスト項目 3</li> </ul>
タイプ-
ディスク実線円
円中空円
正方形ソリッドスクエア
定義リスト<dI>
<dt>は定義内容を表します。 <dd>は内容を説明します
CSS コントロール リスト スタイル
list-style-type は、リスト項目に表示されるシンボルのタイプを制御するために使用されます。
ディスク実線円 (順序なしリスト)
none は箇条書き (順序なしリストおよび順序付きリスト) を使用しません。
円中空円 (順序なしリスト)
cjk-表意文字の単純な表意文字の数字
正方形の実線正方形 (順序なしリスト)
グルジアの伝統的なグルジアの番号付けシステム
10進アラビア数字
小数点先行ゼロ 0 で始まるアラビア数字
小文字ローマ数字
大文字ローマ数字
小文字英小文字
大文字、大文字の英字
小文字ラテン文字の小文字
大ラテン大文字のラテン文字
ヘブライ語伝統的なアルメニア語の番号付け
アルメニアの伝統的なヘブライ語の番号付け。
list-style-image はリスト項目ごとに項目画像を設定できます
list-style-position は箇条書きの位置を制御するために使用されます。
inside: リストの箇条書きはテキストの内側にあります
外側: リストの箇条書きがリストのテキストの外側にあります。
list-style: リスト箇条書き、リスト箇条書き位置、リスト項目画像（総合設定リストスタイル）
ハイパーリンク
<a href="ジャンプ ターゲット" terget="ターゲット ウィンドウのポップアップ方法">テキスト画像</a> href リンク ターゲット URL (# 空の接続を確立できます) l ターゲットは開始方法を指定します
アンカー リンク ハイパーリンクはリスト タグとともに使用されます
疑似クラス コントロールのハイパーリンクをリンクする
a:link{CSS スタイル ルール;}デフォルト
a:visited{CSS スタイル ルール;}ハイパーリンクにアクセスした後のスタイル
a:hover{CSS スタイル ルール;}マウスオーバー ハイパーリンク スタイル
a:active{css style rules;} マウスをクリックして押したままにしたときのハイパーリンクのスタイル
テーブルとフォーム
シート
<テーブル> <tr> <td>セル内のテキスト</td> </tr> < /テーブル>
<table> </table> はテーブルの開始と終了を定義します。
border はテーブルの境界線を設定します (デフォルトの border="0" は境界線なし) border-collapse: 境界線の結合を折りたたむ border-colspacing は隣接するセル間の距離を設定します
セル間隔はセル間のスペースを設定します
cellpadding は、セルの内容とセルの端の間のスペースを設定します。
width はテーブルの幅を設定します
height はテーブルの高さを設定します
align は、Web ページ内のテーブルの水平方向の配置を設定します。
bgcolor はテーブルの背景色を設定します。
背景はテーブルの背景画像を設定します
<tr> </tr>いずれかの行を定義します
height は行の高さを設定します
align は、Web ページ内のコンテンツ行の水平方向の配置を設定します。
valign はコンテンツ行の垂直モードを設定します
bgcolor は行の背景色を設定します
背景は行の背景画像を設定します
<td> </td> テーブル内のセルを定義します
width はセルの幅を設定します
height はセルの高さを設定します
align は、Web ページ内のセルの水平方向の配置を設定します。
valign はセル内容の垂直パターンを設定します
bgcolor はセルの背景色を設定します
背景セルの背景画像を設定します
Colspan は、セルがまたがる列の数を設定します (水平方向のセルを結合するために使用されます)。
rowspan は、セルが垂直にまたがる行数を設定します (垂直方向のセルを結合するために使用されます)。
<th> タグは、テーブル ヘッダーを td タグと同じレベルに設定するために使用されます。
テーブル構造
<thead> は、table タグ内にあるテーブル ヘッダーを定義します。
<tfoot>テーブルの定義に使用されるヘッダーとフッターは、thead の後に配置されます。
<tbody> はテーブルのテーマを定義します
CSS コントロールテーブルの境界線
tableタグのborder属性でテーブルの境界線を設定できます。
形状
フォーム構成
from フォーム要素の構文: <from> フォーム コントロール</from>
アクションはデータ送信の宛先アドレスを指定します
メソッド データリクエストメソッド get /post get は、ブラウザがフォーム サーバーとの接続を確立し、それを直接送信することを意味しますが、安全性は低くなります。 Post は、ブラウザーが action 属性で指定されたフォームへのリンクを確立し、それを部分的に送信することを意味します。暗黙的な送信の方が安全です。
name はフォームの名前を指定するために使用されます
フォームコアコントロール
入力制御
<input type="コントロールの種類"/ >
タイプ
テキスト単一行のテキスト入力ボックス
パスワード パスワード入力ボックス
ラジオのラジオボタン
チェックボックスチェックボックス
ボタン通常ボタン
送信送信ボタン
リセットボタン
画像画像フォームの送信ボタン
隠された隠しフィールド
ファイルドメイン
nameコントロールの名前
値入力コントロールのデフォルトのテキスト値
ページ上のサイズ入力コントロールの表示幅
readonly コントロールの内容は読み取り専用です (編集または変更できません)。
無効にすると、初めてページをロードするときにコントロールが無効になります (灰色で表示されます)。
オンにすると、選択コントロールでデフォルトで選択される項目が定義されます。
maxlength コントロールを使用すると、最大文字数を入力できます。
テキストエリアコントロール
入力コントロールの tayp 属性の値は text です。このコントロールは複数行のテキストを作成でき、cols は複数行のテキスト ボックスの各行の文字数を設定でき、rows は表示される行数を定義するために使用されます。複数行のテキスト入力ボックス。
name 属性セット名
readonly スペースのコンテンツは読み取り専用です
無効初めてページをロードするときにコントロールを無効にします
コントロールを選択
ドロップダウン メニューの作成に使用されます
選択する
サイズは、ドロップダウン メニューに表示される項目の数を指定します。
multiple で multiple="multiple" を定義すると、ドロップダウン メニューに複数の選択機能が表示されます。
オプション
selected を定義する場合、現在の項目がデフォルトの項目になります。
HTML5 フォーム属性
新しいフォーム属性
autocomplete 属性は、フォームにオートコンプリート機能、つまりフォームコントロールの入力内容を記録し、再入力時に入力履歴をドロップダウンリストに表示するかどうかを指定するために使用します。
on はオートコンプリート機能があることを意味します
オフはオートコンプリート機能がないことを意味します
novalidate 属性は、フォームの送信時にフォームの有効性チェックをキャンセルすることを指定します。フォーム コントロール内のすべてのフォームの検証は無効になります。 ="ノバリデート"
新品フォームコントロール P172
新しい入力制御タイプ
電子メール タイプ <input type="email"> は、電子メール アドレスを入力するために特別に使用されるテキスト ボックスです。
URL タイプ <input type="url"> は、URL アドレスを入力するために特別に使用されるテキスト ボックスです。
tel タイプ <input type="tel"> は、電話番号を入力するために特別に使用されるテキスト ボックスです。
検索タイプ <input type="search"> は、検索キーワードを入力するために特別に使用されるテキスト ボックスです。
カラータイプ <input type="color"> は、カラーに特別に設定されたテキスト ボックスです。
numder タイプ <input type="numder"> は、数値の入力に特化したテキスト ボックスです。
value は入力ボックスのデフォルト値を指定します
最大最大値
最小値
ステップ法定間隔を入力してください
範囲タイプ <input type="range"> は、特定の範囲内の値の入力範囲を提供するために使用されます。
Date pinkers type <input type=date, month, week...> は時刻日付タイプを指定します
date は日、月、年を選択します
month は月と年を選択します
週は週と年を選択します
time時間を選択してください
datetime は時間、年、月、日 (UTC 時間) を選択します
datetime-local は、時間、日、月、年 (現地時間) を選択します
新しい入力属性
autofocus 属性は、(入力ボックス内で) ページが読み込まれた後に自動的にフォーカスを取得するかどうかを指定するために使用されます。
form 属性は、ページ上の任意の場所にフォーム内のサブ要素を書き込むことができます。必要なのは、この仕様の要素の form 属性値を form に設定することだけです。
list 属性は、入力ボックスにバインドされた datalist 要素を指定し、その値は特定の datalist 要素の ID です。
multiple 属性は、入力ボックスで複数の値を選択できることを指定します。この属性は電子メール (カンマ区切り) とファイル (ファイル) に適用されます。
min、max、step 属性は、数値または日付を含む入力タイプの制限を指定するために使用されます。
pattern 属性は、入力タイプ入力ボックスに入力された内容が、定義された正規表現 P181 と一致するかどうかを検証するために使用されます。
placeholder 属性は、入力タイプの入力ボックスに関連情報を提供し、入力ボックスがユーザーに入力することを期待する内容を説明するために使用されます。
required 属性は、フォーム入力ボックスへのユーザーの入力が空であり、ユーザーがフォームを送信できないかどうかを判断するために使用されます。
DIV CSS レイアウト
共通のレイアウト属性
ラベルフロート属性
セレクター {float: 属性値}
float の共通属性値
左のラベルは左にフロートします
右のラベルは右にフロートします
none ラベルはフローティングされません
フロートの特徴: 1. フローティング要素はドキュメント フローから外れ、ドキュメント内の位置を占めなくなります。 2. フローティング要素を設定すると、要素は親要素の左側または右側に移動します。 3. デフォルトでは、フローティング要素は親要素から移動されません。 4. 浮動要素が左右に移動する場合、前方の他の浮動要素を超えることはありません。 5. フローティング要素がフローティングされていないブロック要素の上にある場合、フローティング要素は上に移動できません。 6. 浮動要素はその上の浮動要素の高さを超えず、最大でもそれと同じ高さになります。 7. フローティング要素はテキストを覆わず、テキストは自動的に要素の周りを回り込みます。
クリアフロート
セレクター {クリア: 属性値;}
left では、左側のフローティングラベルを許可しません
right では、右側のフローティング ラベルは許可されません
両方とも両側のフロートを同時にクリアします
空のラベルクリアフロート
オーバーフローを使用してフロートをクリアする
overflow:hidden スタイルをラベルに適用すると、ラベル上のフローティングの効果をクリアすることもできます。
ラベルの配置属性
セレクター {位置: 属性値;}
静的自動位置決め
相対的な相対位置決め、元のドキュメント フローの位置を基準とした位置決め
絶対配置。以前に配置された親タグを基準にして配置されます。
固定された固定位置、ブラウザ ウィンドウの位置と同等
位置配置モードは、ラベルの配置方法を定義するためにのみ使用され、ラベルの特定の位置を決定することはできません。
上部のオフセットは、親ラベルの上端に対するラベルの距離を定義します。
下部オフセットは、親ラベルの下端に対するラベルの距離を定義します。
left左オフセットは、親ラベルの左線を基準としたラベルの距離を定義します
右上のオフセットは、親ラベルの右の線に対するラベルの距離を定義します。
その他のプロパティ
セレクター {オーバーフロー: 属性値;}
表示されているコンテンツはトリミングされず、ラベル ボックスの外側にレンダリングされます。
非表示のオーバーフロー コンテンツはトリミングされ、トリミングされたコンテンツは非表示になります。
aoto は必要に応じてスクロール バーを生成し、表示する必要があるコンテンツに適応します。
z-index 属性は上下の位置を調整します
レイアウトタイプ
単一列レイアウト
マルチメディアの埋め込み
ビデオファイルとオーディオファイルの形式
HTML5 でサポートされているビデオ形式: ogg、mpeg4、webm
HTML5 でサポートされているオーディオ形式: ogg、mp3、wav
ビデオとオーディオを埋め込む
ビデオ: <video src="ビデオ ファイル パス" control="controls"></video> ビデオプラグインを表示するかどうか。ビデオが表示できない場合に、ビデオの間にテキストを挿入することもできます。
属性: autoplay は、現在のページが読み込まれた後にビデオを自動的に再生します。 ループビデオが終了し、再び再生が始まります プリロード ビデオはページの読み込み時に読み込まれ、再生の準備が整いますが、autoplay 属性が使用されている場合、この属性は無視されます。 ポスター 動画が再生できない場合に、画像をリンクし、一定の比率で画像を表示します。
オーディオ: <audio src="オーディオ ファイル パス"controls="controls"></audio>
属性: autoplay は、現在のページが読み込まれた後にオーディオを自動的に再生します。 ループオーディオが終了し、再び再生が始まります プリロード オーディオはページの読み込み時に読み込まれ、再生の準備が整いますが、autoplay 属性が使用されている場合、この属性は無視されます。
過度なデフォルメやアニメーション
以上
遷移傾向プロパティ
none属性がないと過剰な効果が得られる
all全属性が過剰な効果を得る
property は、過剰な効果を適用する CSS プロパティの名前を定義します。複数の名前はカンマで区切られます。
遷移期間プロパティ
時間はトランジション効果の継続時間を定義します
遷移タイミング関数プロパティ
トランジション属性のトランジション効果を指定するために使用されるスピード カーブ
Linear は、同じ速度で開始および終了するトランジション エフェクトを指定します。これは、cubic-bezier と同等です。
イーズ (デフォルト) ゆっくりと開始し、その後速度が上がり、ゆっくりと終了します。
ゆっくりと始まり、徐々に速度が速くなるイーズイン トランジション エフェクト
ゆっくりとした速度で終了するイーズアウト トランジション エフェクト
低速で開始し、低速で終了するイーズインアウト トランジション エフェクト
cubic-bezier は加速と減速のベジェ曲線の形状をそれ自体で定義します
遷移遅延プロパティ
トランジション効果の開始時間を指定します
遷移複合プロパティのシーケンスは上記のとおりです
2D変形
変換属性
変換関数は変換を設定するために使用されます。
変換:translate(x-... y-...) 変換
変換:スケール(x-... y-...) スケール
変換:スキュー(x-...y-...)スキュー
変換:回転(角度)回転
中心点の変換原点を設定します: x 軸 y 軸 z 軸
3D変形
rotateX() を使用すると、指定された要素を X 軸を中心に回転できます。
rotateY() を使用すると、指定した要素を Y 軸を中心に回転できます。
rotateZ() を使用すると、指定した要素を Z 軸を中心に回転できます。
rotated3d (x-y-z、angle(回転角度)) の包括的な属性設定
アニメーション
@keyframes ルールのアニメーションは現在のアニメーションの名前を表します keyframes-selector キーフレームセレクターフォーム (0) は開始を意味し、(100%) は終了を意味します css-style は、現在のキーフレームを実行するときに応答するアニメーションを定義します。
アニメーション名属性は、適用されるアニメーション名を定義するために使用されます。アニメーション名は @Keyframes ルールによって参照されます。 アニメーション名:キーフレーム名|なし なしはアニメーションが適用されないことを意味します
anime-duration プロパティは、アニメーション効果全体が完了するまでに必要な時間を定義するために使用されます。 アニメーション期間: 時間
anime-timing-function 属性は、アニメーションの速度曲線を指定するために使用されます。 アニメーション タイミング関数: 値;
Linear は、同じ速度で開始および終了するトランジション エフェクトを指定します。
イーズ (デフォルト) ゆっくりと開始し、その後速度が上がり、ゆっくりと終了します。
ゆっくりと始まり、徐々に速度が速くなるイーズイン トランジション エフェクト
イーズアウトアニメーションが低速で終了する
低速で開始し、低速で終了するイーズインアウト トランジション エフェクト
cubic-bezier (n,n,n,n) は加速と減速のベジェ曲線の形状を自分で定義します
アニメーション遅延プロパティは、アニメーション効果を実行するための遅延時間を定義するために使用されます。 アニメーション遅延: time は待機時間を定義します。
anime-iteration-count プロパティは、アニメーションの再生回数を定義するために使用されます。 アニメーション反復回数: 無限の再生回数を定義します。
アニメーション方向プロパティは、現在のアニメーション再生の方向を定義します。
アニメーション属性は、上記の 6 つの属性のコレクションを定義するために使用されます。
描画とデータ保存の原則