CSS Day-6

46956 ワード

テキストリンク

CSS 2D

transform

2 D座標で要素のプロパティを変形します.
移動、回転、スケール、傾斜

	body{
            margin-left: 100px;
        }
        /* 아래 상자들의 크기와 패딩, 테두리를 지정 */
        p{
            width: 400px;
            padding: 15px;
            border: 3px solid darkblue;
        }
        /* 각 웹브라우저의 호환성을 위한 설정,  */
        #trans1{
            /* 우로 30px, 밑으로 30px 이동 */
            -ms-transform: translate(30px, 30px);
            -moz-transform: translate(30px, 30px);
            -o-transform: translate(30px, 30px);
            -webkit-transform: translate(30px, 30px);
            /* 그 외 브라우저를 위한 설정도 포함 */
            transform: translate(30px, 30px);
            background-color: deeppink;
        }
        #trans2{
            /* 60도 만큼 회전 */
            transform: rotate(60deg);
            background-color: gold;
        }
        #trans3{
            /* 가로 1.5배, 세로 1.2배 확대 */
            transform: scale(1.5,1.2);
        }
        #trans4{
            /* x축 30도, y축 15도 만큼 회전 */
            transform: skew(30deg, 15deg);
            background-color: yellowgreen;
        }

gradient

ちゃくしょく
せんけいこうばい
直線-勾配(開始位置、開始色、終了色)

linear-gradient(<각도> to <방향>, color-start, color-stop)
linear-gradient(left top, blue, white)
linear-gradient(45deg, blue, white)

ラジアル勾配(円)
ラジアル勾配(<最終形状><サイズ>位置>,color-start,color-stop)

radial-gradient(circle, white, yellow, red);
radial-gradient(10% 10%, circle, white, blue);
radial-gradient(circle at 10% 10%, white, blue);

接頭辞を使用する場合、ランプが適用されない場合はカラーを指定し、接頭辞付きランプで他のブラウザで動作可能なランプを作成します.

	#gradient{
            /* 그라데이션 미적용 시 나타낼 배경 지정 */
            background: yellow;
            /* 각 브라우저 호환성에 따른 적용 */
            background:-webkit-linear-gradient(left,red,skyblue);
            background: -moz-linear-gradient(left,red,skyblue);
            background: -o-linear-gradient(left,red,skyblue);
            /* 그 외 브라우저 지정 */
            background: linear-gradient(left,red,skyblue);
        }

追加勾当的说明

vender prefix

これは接頭辞で、主要なWebブラウザベンダーが新しい実験的な機能を提供する際に、以前のバージョンのWebブラウザにこれを示すために使用しています.
CSS推奨に含まれていない機能または含まれているが完全に確定していない機能を使用する場合は、前に置く必要があります.
cssは、次のリンクで表示することをお勧めします.
Web標準CSSの稼働状況へのアクセス
接頭辞
エクスプローラ
-ms-
エクスポート(サービス停止)
-moz-
ガイコブラウザ(モジラ、Fire Fox)
-o-
オペラブラウザ
-webkit-
Webスイートベースのブラウザ(Chrome、Edge、Safari)

transition

要素に追加するcssスタイルの切り替え効果を設定します

追加するトランジション効果または期間の設定

transition : property timing-function duration delay

プロパティ:

を設定して要素に追加する変換効果

タイミング-関数:切り替え効果の値を設定(変更速度を設定)

リニア:

を一定速度で変換

ease:変換効果緩慢開始~快速~緩慢終了

duration:切り替え効果の時間を

に設定

遅延:遅延時間を

に設定

    <style>
        div{
            width: 100px;
            height: 100px;
            margin: 30px;
            border: 1px solid black;
        }
        #bg-tr{
            background-color: plum;
      /* 배경화면을 일정한 속도로 2초동안 바뀜 */
            transition: background-color linear 2s;
        }
      /*커서를 올려두면 배경화면을 네이비색으로 바꾼다.*/
        #bg-tr:hover{
            background-color: navy;
        }
      /*모든 속성을 2초동안 ease모드로 바꾼다.*/
        #border-tr{
            background-color: olive;
            border: 5px dotted hotpink;
            transition: all ease 2s;
        }
      /*커서를 올려두면 다음과 같이 바꾼다.*/
        #border-tr:hover{
            background-color: lavender;
            border: 5px dashed cornflowerblue;
            border-radius: 50%;

        }
    </style>
</head>
<body>
    <h2>tarnsition - 1</h2>
    <div id="bg-tr"></div>
    <div id="border-tr"></div>
</body>
</html>

利益を利用して箱を移動することもできます.

<style>
        h2{text-align: center;}
        #container{
            position: relative;
            width: 800px;
            height: 400px;
            margin: 0 auto;
            border-radius: 30px;
            border: 5px solid black;
            padding: 30px;
        }
        .box{
            font-size: 20px;
            position:relative;
            width: 140px;
            height: 140px;
            margin-bottom: 50px;
            background-color: gold;
        }
        p{
            text-align: center;
            padding-top: 50px;
            font-weight: bold;
        }
        #container:hover > .box{
            /* 2바퀴 돌린다. */
            transform: rotate(720deg);
            /* 커서를 올려두면 margin-left를 적용한다. */
            margin-left: 650px;
        }
        #no-delay{
            /* 변화시간을 3초로 적용한다. */
            transition-duration: 3s;
        }
        #delay{
            /* 1초뒤에 2초간 변화한다. */
            transition-duration: 2s;
            transition-delay: 1s;
        }
    </style>
</head>
<body>
    <h2>transition -2</h2>
    <div id="container">
        <div id="no-delay" class="box">
            <p>༼ つ ◕_◕ ༽つ</p>
        </div>
        <div id="delay" class="box">
            <p>(☞ﾟヮﾟ)☞</p>
        </div>
    </div>
</body>
</html>

animation

要素の現在のスタイルを別のスタイルに変更

@keyframes 애니메이션 명{
            from 혹은 0%{
                처음에 적용할 스타일
            }
            정수%{
                중간지점 마다 적용할 스타일
            }
            to 혹은 100%{
                마지막에 적용할 스타일
            }   
    }

    <style>
        .box{
            /* 애니메이션을 적용 할때는 따로 설정한 애니메이션 이름을 적용하면 된다. */
            animation-name: moving;
            /* 3초간 애니메이션이 실행된다. */
            animation-duration: 3s;
            /* 애니메이션을 끝난 뒤 반복실행 여부 */
            animation-iteration-count: infinite;
            /* 애니메이션이 진행되고 다시 역순으로 실행된다. */
            animation-direction:alternate-reverse;
            margin-top: 100px;
            margin-left: 100px;
            padding: 20px;
            height: 60px;
            border: 1px solid black;
        }
        @keyframes moving {
            /* 애니메이션 시작 옵션을 지정한다ㅣ. */
           from{
               /* 너비 */
            width: 150px;
            /* 배경색 */
            background-color: cornflowerblue;
            /* 투명도 */
            opacity: 0.5;
            /* 글자위치 */
            text-align: right;
            /* 크기와 회전 */
            transform: scale(0.5) rotate(80deg);
        } 
        /* 애니메이션의 마침 옵션을 지정한다. */
        to{
            width: 300px;
            background-color: cyan;
            opacity: 1;
            text-align: right;
            transform: scale(1) rotate(-30deg);
        }
        }
    </style>
</head>
<body>
    <h2>animation - 1</h2>
    <div class="box">
        <h3>CSS Animation</h3>
    </div>
</body>
</html>

perspective()

ユーザ観察者の視点(投影点)を具体化して3 d環境を作成し、立体感を与える属性.
観察者がスクリーンのpxからそんなに遠く離れているように構成する

perspective(관찰자와 사물의 간격)

複数のコンカレントオプションを適用し、中間ステップを指定

<style>
        .box{
            margin: 100px;
            width: 100px;
            height: 100px;
            background-color: deeppink;
            border: 1px solid black;
            animation-name: rotating;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-duration: 3s;
        }
        @keyframes rotating {
            from{
                /* 옵션을 지정 할때 초기상태 */
                transform: perspective(150px) rotateX(0deg) rotateY(0deg);
                opacity: 1;
            }
            50%{    
                /* x먼저 실행하고 y를 나중에 실행하고 싶을때 */
                transform: perspective(150px) rotateX(-180deg) rotateY(0deg);
                opacity: 0.5;
            }
            
            to{
                /* 완료된 x의 값도 그대로 적어줘야한다. */
                transform: perspective(150px) rotateX(-180deg) rotateY(-180deg);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <h2>animation - 2</h2>
    <div class="box"></div>
</body>
</html>

CSS優先度

点数で簡単に考えられます.

!重要->無条件優先

シリーズ->1000ポイント

idプロパティ->100ポイント

classプロパティ、プロパティセレクタ->10時

element->1時

のスコアが同じであれば、以降適用されるスコアは

が優先される.

    <style>
        #id-style-with-important{
            background-color: hotpink !important;
        }
        div{
            color: white;
            font-size: 1.5em;
            font-weight: bold;
            display: block;
            padding: 30px;
            margin: 10px;
            background-color: white;
            border: 1px solid black;
        }
        #id-style{
            background-color: blue;   
        }
        .class-style{
            background-color: tomato;
        }
        .class-style2{
            background-color: gold;
        }
        div{
            background-color: purple;
        }
    </style>
</head>
<body>
    <h2>우선순위</h2>
     <!-- important는 최우선 -->
    <div style="background-color: green;" id="id-style-with-important">div 1번(important 적용)</div>
    <!-- 인라인 속성은 id 속성보다 높다. -->
    <div style="background-color: green;" id="id-style">div 2번(인라인 스타일적용 1000점)</div>                 
    <!-- id 속성의 우선순위는 꽤 높다 -->
    <div id="id-style">div 3번(id 스타일 100점)</div>
    <!-- 태그 속성보다 우선순위가 높다. -->
    <div class="class-style">div 4번(class 스타일 10점)</div>
    <!-- 스타일 속성에서 가장 마지막에 적용한 스타일 -->
    <div>div 5번(마지막에 적용한 스타일)</div>
    <!-- 같은 속성안에 작성하였음으로 나중에 작성된 스타일이 적용 -->
    <div class="class-style class-style2">div 6번(같은 점수 마지막에 적용한 스타일)</div>
    <!-- 다른 속성으로 작성하였음으로 먼저 적용한 스타일이 적용 -->
    <div class="class-style" class="class-style2">div 7번(속성을 나누면 먼저 적용한 속성의 스타일이 우선)</div>
</body>
</html>

優先順位で適用するスタイルは以下のとおりです.

Reference

この問題について(CSS Day-6), 我々は、より多くの情報をここで見つけました https://velog.io/@km2535/CSS-Day-6

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

today.toLocaleDateString

「デイリーリサーチ」Documentオブジェクト