css3學習筆記

1，transition是過度效果，一般是和hover一起用，transition的屬性有height，width常用屬性，在hover裏面就是會覆蓋原來的屬性，屬性由逗號間隔，各個屬性之間沒有先後關係，-webkit-transition: width 2s ease-in,height 2s, -webkit-transition: 2s width ease-in,height 2s, 都是正確的，有一點需要注意的是，延遲發生，width 1s 20s 延遲的20s會在過度時間的後面。

example1 {
            position: absolute;
            bottom: 10px;
            margin:auto;
            background-color: #00B83F;
            height: 200px;
            width: 200px;
            overflow: hidden;
            -webkit-transition: width 2s ease-in,height 2s,-webkit-transform 2s;      }

    example1:hover {
        width: 300px;
        height: 300px;
        -webkit-transform: rotate(180deg);
    }```

2，tranform:translate(X,Y), 讓元素偏離原來位置。單位默認是像素。
transform:scale(X,Y) 讓元素變爲原來的多少倍。

div:hover {animation: 1s rainbow 3;} 要用@keyframe 定義一個動畫名稱，就是一個函數。

這些都是css3的屬性，transform還可以當作一個函數用在transition裏面。

定義動畫的函數裏面可以有位置的改變。

 0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}

動畫和transiton交叉使用，在動畫的大背景之下，在動畫的各個時間點設置transform ，在基元素上面設置transition，只要動畫變化過程中有屬性和基元素不一致，都會觸發到transition。

div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -webkit-transition : width 2s ,-webkit-transform 2s
}


@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px; -webkit-transform :rotate(192deg);width : 200px}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

動畫屬性裏面，alternate infinite alternate 要在infinite使用的前提下才生效。

3，column-count 是指定元素被分割的列數，帶有rule的，是指兩列之間邊框的樣式，可以用一個column-rule ：px（多寬） solid（之間的樣式） #FFFF（顏色） 。column-gap是兩列之間的距離。-span 指出元素可以跨多列，不夠位置就換行顯示。

4，響應式佈局 @media only screen and (max-width :800px) 在屏幕小於800px的時候啓動另外一種佈局。（這裏的screen可以是print等其他設備，only | not）
固定盒子的大小，無論怎麼改變邊距都不影響 box-sizing: border-box; 寬度還是50%而不是50%+*px 會並行顯示。

5 對象選擇器 {box-shadow:[投影方式] X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色}

6，<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 使用於移動端，不適用的話，默認移動端的瀏覽器的寬度會大於瀏覽器的寬度。