css新增属性

1.边框图片

切成9宫格，设置途径和宽度

border-image-slice：27 fill //四个方向上的裁切距离

border-image-width：27 fill //边框图片的宽度

border-image-outset：0px //扩展边框

border-image-repeat：round；//不设置：拉伸；repeat：直接重复平铺；round：内容缩放完整重复平铺

 

缩写：border-image：url（。。）27 / 27 px / 0px / round；

2.过渡效果transition

transition-property:left; //过渡效果的属性
transition-duration:2s; //过渡耗时
transition-timing-function:linear; //控制运动速度
transition-delay:2s; //过渡效果延迟

//过渡效果执行完毕后会默认还原到原始状态
简写：
//transition：属性 过渡耗时 时间函数 延迟,多个过渡效果用逗号隔开

div设置样式，就是起始样子；

再设置一个div:active，hover等伪类,设置点击后的效果，再配合上面的transition。

如果分多步（跳跃状态），transition最后加一个steps（n）

3.这回终于把transition，transform ，translate，弄懂了。。

transition是一个过渡效果，需要添加属性，通过耗时慢慢改变属性的状态；

那么transform就是其中一个属性，跟left，font-size一样的属性，可以改变大小坐标等，那么属性必定要有属性的值；

于是translate（）就是一个属性值，改变坐标值（相对于元素的改变，正x向右边移动，正y向下移动）

除了translate（），transform属性还有很多属性值：

然后animation就是设置关键帧，可以有多个状态的转换。

animation-name: myname; //必须

animation-duration: 10s; //必须

animation-iteration-count：2；//播放次数，如infinite无限

animation-direction：alternate; //交替动画，结束->开始->结束，比如摆钟

animation-delay：2s；
animation-fill-mode：forwards

// forwards：保持结束状态，有动画状态+有延迟时，延时过程中不会进入开始状态；

// backwards：不会保持结束状态，但有动画状态+有延迟时，延时过程中已经进入开始状态；

//both：保持结束状态，有动画状态+有延迟时，延时过程中已经进入开始状态；

animation-play-state：paused/play

@keyframs myname{

0%{

transform:translate(0,0);

}

50%{

}

100%{

}

}

4.碎片恢复完整

（1）让碎片乱飞，设置transform，分别是用translate的坐标移动，又用rotate角度变换；

（2）设置transition的时间和属性，transition：transform，1s；

（3）在伪类里设置transform为none，即在hover或者active的时候把transform属性去掉，碎片就不乱飞恢复完整了。

 

5.transorm-style 保留3d变换后的效果，不还原原来的状态

transform-style:perserve;