画像の動的な効果を実現するための CSS の関連プロパティの紹介

CSS は、写真の動的効果を実装します。

hoverの使い方擬似クラス

操作手順まず実現したい効果を決定し初期表現を設定状態

アニメーション使用するCSS属性

トランジション属性

transition-プロパティ指定設定 トランジション効果の CSS プロパティの名前。

(

none トランジション効果を取得するプロパティはありません。

all すべてのプロパティがトランジション効果を取得します。

property は、トランジション効果を適用する CSS プロパティ名のリストを定義します。リストはカンマで区切られます。

)

transition -duration は、トランジション効果が完了するまでにかかる秒数またはミリ秒数を指定します。

transition-timing-function は、スピードエフェクトのスピードカーブを指定します。

(

linear は、同じ速度で開始および終了するトランジション エフェクトを指定します (cubic-bezier(0,0,1,1) に等しい)。

ease は、ゆっくりと開始してからより速くなるトランジションを指定し、 Effect(cubic-bezier(0.25,0.1,0.25,1))

ease-in は、低速で開始するトランジション エフェクトを指定します (cubic-bezier(0.42,0,1,1) と同等)。低速で終了するトランジション エフェクトを指定します (cubic-bezier(0,0,0.58,1) と同等)。

ease-in-out は、低速で開始および終了するトランジション エフェクトを指定します (cubic-bezier(0,0,0.58,1) と同等)。 bezier(0.42,0). ,0.58,1))

cubic-bezier(n,n,n,n) は 3 次ベジェ関数

で独自の値を定義します。 可能な値は

) です。 transition-lay は、トランジション効果が開始されるタイミングを定義します。

trans

for

m 属性は、要素に 2D または 3D 変換を適用します。このプロパティにより、要素を回転、拡大縮小、移動、または傾けることができます。

translateX(x) は、X 軸の値のみを使用して変換を定義します。 translateY(y) は、Y 軸の値のみを使用して変換を定義します。

scale(x,y) は 2D スケーリング変換を定義します。

scaleX(x) は、X 軸の値を設定することでスケーリング変換を定義します。

scaleY(y) は、Y 軸の値を設定することでスケーリング変換を定義します。

rotate3d(x,y,z,angle) は 3D 回転を定義します。

rotateX(angle) は X 軸に沿った 3D 回転を定義します

rotateY(angle) は Y 軸に沿った 3D 回転を定義します

rotateZ(angle) は Z 軸に沿った 3D 回転を定義します

rotate(angle) は 2D 回転を定義します角度はパラメータで指定します。変換原点 (回転中心点)

skew(x-angle,y-angle) を設定して、X 軸と Y 軸に沿った 2D スキュー変換を定義します。

skewX(angle) は、X 軸に沿った 2D スキュー変換を定義します。

skewY(angle) は、Y 軸に沿った 2D スキュー変換を定義します。

以上が画像の動的な効果を実現するための CSS の関連プロパティの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。