QQQforMacブラウザの実戦
1553 ワード
一、ゴロゴロスクリーン
ローリングスクリーンサイトは現在非常に流行している個人局や企業局の制作スタイルであり、それ自体が流行している傾向であり、このタイプのサイトはcss 3のアニメーションモジュール技術を大量に運用し、jqueryを使用する必要がある.
特徴:各画面が敷き詰められている幅と高さは100%です. スクロールバーがありません. スクロール効果にはサードパーティライブラリのサポートが必要です. 各画面の要素は位置決めによって実現される.一般的には中央に位置していますが、これは重要です. すべての入場アニメーションと出場アニメーションはCSS 3によって実現される.
二、事件の知識点
1.jQuery Mousewheel Pluginは、ブラウザにまたがるマウスホイールのサポートを追加するために使用されます.mousewheelイベントの処理パラメータdeltaによりマウスホイールの方向と速度を取得できます.deltaの値が負の-1である場合、ローラは下にスクロールし、正の1は上にスクロールします.2.animation:scroll 1 s infinite alternate infiniteアニメーションは、alternateアニメーションを無制限に再生すべきであることを規定するlinear-gradient線形グラデーションのデフォルトは上から下へ3.構文:background:linear-gradient(direction,color-stop 1,color-stop 2,...);TransformはCSS 3でアニメーションを作る時、できるだけ各種類のアニメーションの属性を完全に書いて、各種類のブラウザ器の互換性の問題例に適応します:
perspectiveは、3 D要素のビューからの距離をピクセルで定義します.エレメントにperspectiveプロパティを定義すると、そのサブエレメントはエレメント自体ではなく、ピボット効果を得ます.perspectiveプロパティは3 D変換要素にのみ影響します.効果は:近大遠小文法:perspective:number|none;backface-visibilityは、要素がスクリーンに面していない場合に表示されるかどうかを定義します.このアトリビュートは、回転要素が背面に表示されない場合に便利です.3 D効果が小さいとbackface-visibility:visible|hiddenが現れる.transform-styleプロパティは、3 D空間にネストされた要素をどのように表示するかを規定します.このプロパティはtransformプロパティとともに構文を使用する必要があります.transform-style:flat|preserve-3 d;
ローリングスクリーンサイトは現在非常に流行している個人局や企業局の制作スタイルであり、それ自体が流行している傾向であり、このタイプのサイトはcss 3のアニメーションモジュール技術を大量に運用し、jqueryを使用する必要がある.
特徴:
二、事件の知識点
1.jQuery Mousewheel Pluginは、ブラウザにまたがるマウスホイールのサポートを追加するために使用されます.mousewheelイベントの処理パラメータdeltaによりマウスホイールの方向と速度を取得できます.deltaの値が負の-1である場合、ローラは下にスクロールし、正の1は上にスクロールします.2.animation:scroll 1 s infinite alternate infiniteアニメーションは、alternateアニメーションを無制限に再生すべきであることを規定するlinear-gradient線形グラデーションのデフォルトは上から下へ3.構文:background:linear-gradient(direction,color-stop 1,color-stop 2,...);TransformはCSS 3でアニメーションを作る時、できるだけ各種類のアニメーションの属性を完全に書いて、各種類のブラウザ器の互換性の問題例に適応します:
0%{
transform:translateX(0px) translateY(10px)
translateZ(0px) rotateX(0deg) rotateY(0deg)
rotateZ(0deg) scaleX(1) scaleY(1)scaleZ(1);
}
100%{
transform:translateX(0px) translateY(0px)
translateZ(0px) rotateX(0deg) rotateY(0deg)
rotateZ(0deg) scaleX(1) scaleY(1)scaleZ(1);
}
perspectiveは、3 D要素のビューからの距離をピクセルで定義します.エレメントにperspectiveプロパティを定義すると、そのサブエレメントはエレメント自体ではなく、ピボット効果を得ます.perspectiveプロパティは3 D変換要素にのみ影響します.効果は:近大遠小文法:perspective:number|none;backface-visibilityは、要素がスクリーンに面していない場合に表示されるかどうかを定義します.このアトリビュートは、回転要素が背面に表示されない場合に便利です.3 D効果が小さいとbackface-visibility:visible|hiddenが現れる.transform-styleプロパティは、3 D空間にネストされた要素をどのように表示するかを規定します.このプロパティはtransformプロパティとともに構文を使用する必要があります.transform-style:flat|preserve-3 d;