css特性

1.过渡效果

 			/*鼠标形状*/
            cursor: pointer;
            /*过渡效果 过渡的属性名 过渡时间*/
            /*transition-timing-function   定义过渡的时间曲线*/
            /*                            ease（默认）、ease-in....*/
            /*                            linear表示匀速*/
            transition: all  2s linear;
            /*过渡效果 先变宽1s,然后在变高2s,从第1s开始，变背景色从第3秒开始*/
            transition: width 1s,height 2s 1s,background-color 3s 3s;

2.动画效果

/*关键帧动画*/
   @keyframes abc {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
  animation: abc 3s linear;
 /*引用动画的名称*/
  animation-name:abc;
  /*规定动画完成一个周期需要的时间*/
  animation-duration:3s;
  /*时间曲线*/
  animation-timing-function:linear;
  /*在动画开始前或结束后，是否一直应用动画0%或100%的样式*/
  /*backwards（之前）forwards（之后）both（全部）*/
  animation-fill-mode:both;
   /*动画的延迟*/
  animation-delay:0s;
 /*动画播放的次数*/
 /*infinite 无限次*/
 animation-iteration-count:infinite;
 /*规定动画是否在下一周期逆向地播放。*/
/*normal	默认值。动画按正常播放。*/
/*reverse	动画反向播放。*/
/*alternate	动画在奇数次（1、3、5...）正向播放*/
/*alternate-reverse	动画在奇数次（1、3、5...）反向播放*/
animation-direction:alternate-reverse;
/*规定动画是否运行*/
animation-play-state:running;

#box:hover{
/*鼠标移入暂停*/
 animation-play-state:paused;
}

3.多列

/*指定列数量*/
/*column-count: 3;*/
/*制定列间隙的大小*/
column-gap:30px;
/*分割线的样式*/
column-rule: 1px solid black;

/*指定列宽 它与column-count: 3冲突，column-count: 3 比它优先级高*/
column-width:100px;
/*列的数量和列宽 它的作用包含了column-count 和column-width */
columns: 3 100px;

4.用户界面

/*当一个元素有overflow时，可以设置resize*/
/*让我们能够拖动改变大小。*/
 overflow: hidden;
 /*水平、垂直都允许拖动大小*/
 resize: both;

 /*outline: 2px solid red;*/
 /*设置轮廓线向外扩张的距离*/
 outline-offset: -10px;
 /*设定，width和height指定的尺寸*/
/*content-box  元素自身的尺寸*/
/*border-box   元素自身+内边距+边框的总尺寸*/
box-sizing: border-box;
滤镜
filter:blur 2px;

5.弹性盒子

/*flex弹性盒子（新的元素类型）*/
display: flex;

/*弹性盒子相当于一个烤肉炉子，炉子上默认会放置一根*/
/*烤肉签子（主轴），子元素（弹性子元素）相当于签字上的肉串。*/

/*设定签子的摆放方向*/
/*row  →*/
/*row-reverse  ←*/
/*column  ↓*/
/*column-reverse  ↑*/
flex-direction:row;

/*弹性子元素在主轴上的对齐方式*/
/*flex-start   flex-end    center*/
/*space-around   环绕每个子元素的尺寸保持一致*/
/*space-between   两个子元素之间的距离保持一致*/
/*space-evenly    元素及两端之间的距离保持一致*/
justify-content:space-evenly;

/*规定子元素在侧轴（垂直于主轴，方向↓→）上的统一的对齐方式*/
/*可以在弹性子元素内设置align-self来覆盖统一的对齐方式*/
align-items:center;

/*默认弹性盒子只有一个主轴，子元素超出时会产生挤压的效果（不会换行）*/

/*用来设置主轴是否是多主轴及如何摆放多条主轴*/
flex-wrap: wrap;

/*在多主轴状态下，主轴在侧轴上的排列方式*/
align-content:space-evenly;

/*主轴方向和主轴是否多行的简写*/
flex-flow:row wrap;

弹性盒子实例