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;