CSSの各種モジュール

17152 ワード
Webフロントエンド
一、移行モジュール(transition)
1、基本使用
  • 使用時に遷移効果が必要な属性と遷移の時間長
    • を示す必要がある.
  • その後、設定した遷移効果
    • を見るには、属性が変化する必要があります.
    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>

        #div1 {
            width: 100px;
            height: 100px;
            background: blue;
            transition: height 5s, width 5s;
        }

    style>
head>
<body>

<div id="div1">div>

<script>
    onload = function () {
        var oDiv = document.getElementById("div1");
        oDiv.onclick = function (ev) {
            this.style.width = '200px';
            this.style.height = '200px';
        }
    }
script>

body>
html>
  • hover偽クラスのすべてのラベルを使用できます.
  • 多属性の遷移効果の書き方は以下の通りである.
    • div{
    transition-property:width,height;
    transition-duration:5s,5s;
}

    2、その他の属性
  • transition-delay:アニメーションの遅延を設定します.
  • transition-timing-function:アニメーションの速度を設定する(linear、ease-in-out)
    • 3、連写形式
  • transition： ;
  • の後の2つの値は省略することができる.
  • マルチプロパティはカンマで区切られています.
  • 多属性の遷移が同じならtransition:all 5 s;

    • 二、2 d変換モジュール
    1、基本入門
    パン:transform：translate（x，y）回転:transform：rotate（45deg）拡大/縮小:transform：scale（x，y）
  • は1を境界とし、拡大より大きく、水平垂直方向のスケールが同じ場合に1つの値だけ書くことができる.

    • 総合:transform：rotate(45deg) translate(x，y) scale(x，y)
  • が回転すると同時に座標系も回転し、後の平行移動に影響します.
  • 書き順も最後の変換効果に影響する
    • 2、変形中心
  • はデフォルトで要素の中心点であり、設定によって変更できます.
  • transform-originの3つの値:ピクセル、パーセント、キーワード
  • transform-origin:50% 50%;

    • 3、回転軸方向
  • rotateX();rotateY();rotateZ();
  • デフォルトはZ軸回りに回転します.

    • 4、ピボット属性
  • は近大遠小の視覚効果である.
  • perspective:500px;後の属性値の意味は、どのくらいの距離から見ると、近いほど効果が明らかになることです.
  • perspectiveという属性は親コンテナに追加され、サブ要素はこの効果を見ることができます.

    • 5、影
    箱の影
  • box-shadow:水平オフセット垂直オフセットぼかしシャドウ拡張色
  • 略記は前の3つの属性だけでよい.
  • 影は内外の影に分けられ、デフォルトの外の影で、デフォルトの色は箱の内容の色と同じです.
    • box-shadow: 10px 10px 5px red;

    テキストシャドウ
  • text-shadow:水平オフセット垂直オフセットぼかし色
  • 色のデフォルトは箱と同じです.

    • 三、アニメーションモジュール
    1、基本使用
    アニメーションとトランジションの違い
  • アニメーションは人為的なトリガを必要とせず、移行が必要である.

    • アニメーションの3要素
  • アニメーション名:animation-name
  • アニメーション時間:animation-duration
  • 動画内容:
    • @keyframes fff｛
    from{
        ...
    }
    to{
        ...
    }
｝

/*          */
@keyframes fff｛
    0%{
        ...
    }
    50%{
        ...
    }
    100%{
        ...
    }
｝

    2、その他の属性
  • animation-delay:アニメーション遅延;
  • animation-timing-function:アニメーションの速度;
  • animation-iteration-count:アニメーションのサイクル数;
  • animation-direction:往復運動するかどうか;
  • animation-play-state:アニメーションの一時停止または再生状態;
  • animation-fill-mode:アニメーションの開始または終了時の状態を規定する(none、backwards、forwards、both);
    • 連写
  • animation:名称時長速度遅延回数往復
  • 簡略化保証三要素で
    • div{
	animation:run 2s linear 5s infinite alternate;
}
@keyframes run {
    from{
        width:100px;
    }
    to{
        width:200px;
    }
}

    四、3 d変換モジュール
  • 親要素にtransform-style：preserve-3dを加えるには、3 d効果を示す必要があります.

    • 1、正方体
  • ulliレイアウト;各面は平行移動と回転の変化を行い、回転の角度に注意する.
  • 前後の上下4面の内容が正しく表示することを保証するために、先に回転してから平行移動し、回転角度はそれぞれ90、180、270、0
    • である.
  • ぐらいの2つの面は内容とは関係なく、勝手です.

    • 2、直方体
  • 正方体に基づいて前後上下4面水平方向にスケーリングする.左右の2つの面は、スケールの状況に応じて平行移動の距離を増やします.
  • 親要素がスケーリングされ、子要素もスケーリングされます.

    • 五、背景関係
    1、背景寸法(background-size)
  • 特定の属性値は、
  • 特定のピクセル;
  • パーセント;
  • 幅または高さ比延伸(幅または高さをautoとするだけでよい);
  • cover:等比引張は背景が要素を満たすことを知っている.
  • contain:等比引張は幅に伸びるか、元素額の限界に達する.


    • 2、背景位置決め領域(background-origin)
  • 背景画像を箱モデルのどの部分から充填するかを設定します.
  • プロパティ値:padding-box(デフォルト);border-box;content-box;
    • 3、背景描画領域(background-clip)
  • 属性値はoriginの属性値と同じである.デフォルトはborderです.

    • 4、マルチバックグラウンド設定
  • は、1つの要素に複数の背景画像を設定し、背景位置決めの属性でレイアウトする.
    • div{
    background:url("") no-repeat top left,url("") no-repeat top right;
}

    六、メディア照会(@media)
    1、概要
  • @mediaクエリーを使用して、異なるメディアタイプに対して異なるスタイルを定義できます.
  • @mediaは、異なる画面サイズに対して異なるスタイルを設定することができ、応答式のページを設計するために使用することができる.
  • ブラウザサイズをリセットすると、ページもブラウザの幅と高さに応じてページを再レンダリングします.

    • 2、ブラウザサイズに対するCSS
    @media screen and (min-device-height: 768px) and (max-device-width: 1024px) {
    body{background:grey}
}

    3、特定方向に対するCSS
    @media screen and (orientation: landscape) {
    #nav { float: left }
}

@media screen and (orientation: portrait) {
    #nav { float: none }
}
/*landscape      */

    4、異なる設備に対するCSS
    デバイス幅
    @media screen and (min-device-height: 768px) and (max-device-width: 1024px) {}

    ピクセルレート
    @media (device-pixel-ratio: 2) {
    body { background: url(twiceasbig.png) }
}
  • モバイルデバイス無効ズーム:head内設定メタラベル
    • "viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    デバイスのDPI
    @media screen and (resolution: 326dpi) { /* */ }
@media screen and (min-resolution: 96dpi) { /* */ }

    アスペクト比
    @media screen and (device-aspect-ratio: 16/9) { /* */ }

    5、その他の@ルール
  • @import “test.css”;他のスタイルシートを導入することで、長くて複雑なスタイルシートを短く切ることができ、これを導入することで、
    • の管理をより容易にすることができる.
  • @font-face ;私たちが使用したいフォント
    • を導入するために使用されます.
    @font-face {
    font-family: "font of all knowledge";
    src: url(fontofallknowledge.woff);
}
p { font-family: "font of all knowledge", arial, sans-serif; }
    デバッグの進め方について個人的に意識したいことをまとめてみた
    Cows_poj3348_計算ジオメトリ