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中全部调用

例如:

   

   

   


第二种:在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-

张三


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      平均分布在一列