HTML+CSS学習(五)
HTML+CSS学習(五)
文書ディレクトリ
1、ブラウザ接頭辞?
CSS 3は異なるブラウザと互換性があり、古いブラウザと互換性があり、新しいブラウザは基本的にプレフィックスを追加する必要はありません.
2、transition移行?
Transition-property:遷移効果を設定するCSS属性の名前を指定します.Transition-duration:移行効果を完了するのに何秒またはミリ秒かかるかを指定します.Transition-delay:遷移効果がいつ開始されるかを定義します.(遅延(数値が正数)transition-timing-function:速度効果を規定する速度曲線.
注意:hoverに追加しないでください.
3、transform変形?
translate:変位translateX translateY translateZ(3 d)
scale:スケール(値はスケール値で、通常のサイズは1で、現在の要素の中心点がスケールされます)scaleX scaleY scaleZ(3 d)
rotate:回転(回転の値、単位は角度deg)rotateX(3 d)rotateY(3 d)rotateZ(rotateと等級関係で、その正の値は時計回りに回転し、負の値は反時計回りに回転する)
skew:スキューskewX:単位も角度で、正の値は左に傾き、負の値は右に傾きます.skewY
transformの注意事項:1.変形操作は他の要素には影響しません.2.変形操作はブロック要素にのみ追加できますが、インライン要素には追加できません.3.複数の変形操作を同時に追加できる複合書き方.実行には順序があり、先に後の操作を実行してから、前の操作を実行します.translateはrotate,scale,skewの影響を受ける.transform-origin:基点の位置x y z(3 d)
4、アニメ？
animation-name:アニメーションの名前(カスタム)を設定するanimation-duration:アニメーションの持続時間animation-delay:アニメーションの遅延時間animation-iteration-count:アニメーションの繰り返し回数、デフォルト値は1、infinite無限回数animation-timing-function:アニメーションのモーション形式
注意:1.モーションが終了すると、既定では開始位置にとどまります.2. @keyframes : from -> 0% , to -> 100%
アニメーション-fill-mode:アニメーションが再生される前または後にアニメーション効果が表示されるかどうかを指定します.none(デフォルト):モーション終了後に初期位置に戻り、遅延の場合は0%遅延後にbackwardsを有効にします.遅延の場合は0%遅延前にforwardsを有効にします.モーション終了後、終了位置both:backwardsとforwardsを同時に有効にします.
animation-direction:アトリビュート定義は、アニメーションを順番に逆再生するかどうかを定義します.Alternate:一次順方向(0%100%)、一次逆方向(100%0%)reverse:永遠に逆方向、100%~0%normal(デフォルト):永遠に順方向、0%~100%
5、animate.css？
強力なプリセットcss 3アニメーションライブラリです.公式サイトのアドレス:https://daneden.github.io/animate.css/
基本使用:animated:ベースクラス(ベースのスタイル、アニメーション効果ごとに追加する必要があります)infinite:アニメーションの無限回数
6、3 D操作？
transform:rotateX():正の値を上に反転rotateY():正の値を右に反転translateZ():正の値を前に、負の値を後ろにscaleZ():立体要素の厚さ
3 d書き方scale 3 d():3つの値x y z translate 3 d():3つの値x y z rotate 3 d():4つの値0|1(x軸に回転角度を追加するかどうか)0|1(y軸に回転角度を追加するかどうか)0|1(z軸に回転角度を追加するかどうか)deg
perspective（ ）: ， 。
perspective-origin : - ， 。
transform-origin: center center -50px; （Z ， ）
transform-style : 3D
flat ( 2d)、preserve-3d (3d， )
backface-visibility :
hidden、visible ( )
7、CSS 3は拡張背景スタイルを提供していますか?
background-size:バックグラウンドマップのサイズcover:containの上書き:background-originを含む:バックグラウンドマップの塗りつぶし位置padding-box(デフォルト)border-box content-box background-clip:バックグラウンドマップの切り取り方padding-box border-box(デフォルト)content-box
注意:複合スタイルの場合、1つ目は位置、2つ目は裁断
8、CSS 3グラデーション?
注意:グラデーションの0度はページの下にあり、正の値は時計回りに回転し、負の値は反時計回りに回転します.
.woff , mac、linux 。