1.变化 transform

属性：偏移 translate    transform:translate(30px,40px);     比原来的位置右移30px，下移40px

                                    transform:translateY(20px);            下移20px

          缩放 scale          transform:scale(3,4);                       水平方向放大3倍，垂直方向放大4倍

                                    transform:scaleY(3);                       垂直方向放大3倍

          旋转 rotate        transform：rotate（50deg）;         顺时针旋转50度

          倾斜 skew          transform:skew（30deg）;             倾斜30度


          参考点                transform-origin:right bottom        以右下点旋转


2.过渡  transition

transition:过渡对象   时间   速度   延迟时间

transition:scale(3,4)  .7s  linear  1s;

延迟1秒后，水平放大3倍垂直放大4倍的变化，在0.7秒内匀速变化


3.自定义动画

两种定义方式

第一种：背景色从红色变成绿色

@keyframes 自定义名字{

form{

         background:red;

        }

to{

    background:green;

    }

}


第二种: 根据设置百分比来控制变化，从红变蓝变绿

@keyframes 自定义名字{

0%{

      background:red;

     }

50%{

        background:blue;

       }

100%{

          background:green;

         }

}


调用方式：animation:自定义名字  3s   linear  1s  infinite  alternate;

3s:变化时间

linear：匀速变化

1s：延迟1秒

infinite：循环

alternate：原路返回


4 媒体查询  响应式页面（根据尺寸不同的大小，可以调用不同的css）

两种写法   

第一种：在link中查询

写几个独立css，在link中全部调用

例如：

    <link rel="stylesheet" href="css1.css" media="all and (min-width:992px)">

    <link rel="stylesheet" href="css2.css" media="all and (min-width:769px) and (max-width:991px)">

    <link rel="stylesheet" href="css3.css" media="all and (max-width:768px)">


第二种：在css中查询

写一个css，在css里查询，各写各的样式

@media all and (min-width:992px){

    body{

              background: powderblue;

            }

}

@media all and (min-width:769px) and (max-width:991px){

    body{

               background: darkseagreen;

             }

}

@media all and (max-width:768px){

    body{

             background: yellow;

             }

}

      

5.data自定义属性

格式：data-

<a href="" data-mail="zhangsan@qq.com">张三</a>


6.弹性盒子

display:flex;

display:inline-flex;

排列方式direction：

rtl                       从左到右

row                    横排

column              竖排

row-reverse       反着横排

column-reverse  反着竖排


内容对齐

justify-content（左右）：

flex-start                行头紧挨填充

flex-end                 向行尾紧挨填充

center                    居中紧挨填充

space-between      平均分布在一行


align-items（上下）：

flex-start                列头紧挨填充

flex-end                 向列尾紧挨填充

center                    居中紧挨填充

space-between      平均分布在一列