css渐变动画

一.渐变

线性渐变: 

linear-gradient(开始位置 角度，起始颜色，终止颜色)

       

background: linear-gradient(to right,red,yellow,blue);
background: linear-gradient(10deg,red,yellow,green);
  background: repeating-linear-gradient(30deg,red 20px,yellow 40px);
  径向渐变:

 radial-gradient(circle(形状) top left(发散方向)，red(起始颜色),yellow,blue(终止颜色)) ;

二.动画效果  变形

1.transform：:translate(平移)

transform: translate(30px,-30px);
第一个值是横向偏移量；第二个值是纵向偏移量；平移之后占位状态不变

旋转:rotate    deg:  角度的单位

transform: rotate(40deg);
   缩放:scale   (默认值是1,小于1就是缩小，大于1就是放大)

    ransform:scale(0.6);
         改变位置

         top left bottom right center; 两两组合使用

     倾斜:skew        x轴横着倾斜;y轴竖着倾斜

  transform: skew(-30deg);
transform: skewX(-30deg);
transform: skewY(-30deg);

三.动画-过度

transition: all 2s linear;
第一个值是属性,一般是all，也可以是其他属性名称;

第二个值是时间,单位是时间单位,通常是s;

第三个值是过渡速度 linear(匀速)

可以只写时间,其他两个默认值填充all和linear

关键帧@key(animation)

四.css布局

1.弹性布局

        新类型的盒子模型，也叫弹性伸缩盒布局

        display:flex;

        属性要写在父盒子上

        是否换行(会不会为弹性布局挤压自己的子盒子)

        默认值: no wrap 不换行

                     wrap  换行

                     wrap-reverse 改变朝向(自下而上)

        子盒子水平方向排列方式

        center:居中       

        space-between：两端对齐，中间自适应

        space-around：两端对齐，中间自适应。两端留空，值为空的一半

        justify-content:  space-between;

        子盒子排列方向: flex-direction

        默认row：横向排列

               row-reverse：横向从右往左

               column: 纵向排列

               column-reverse：纵向由下往上

               flex-direction: column-reverse

        align-items   子盒子纵向排列方式

                center：居中

                flex-end: 靠下排列

2.多列布局:

      分几列: column-coumnt:6

3.BFC布局:

      触发BFC规范的元素，可以形成一个独立的容器，不受外界影响，从而解决一些布局问题