CSS：动画

2019独角兽企业重金招聘Python工程师标准>>>

旋转（动画）：属性多个之间可以用空格隔开；默认是围绕中心点旋转；

transform(变形)：rotate(45deg);顺时针旋转（从左到右）//默认是围绕Z轴 旋转

                          transform:scale(水平方向 垂直方向）);可正可负；scalex().scaley();放大/缩小；

                            translate(100px);位移//translate(100px,100px);//translateY(100px);可正可负；

                        transform:skew(deg);扭曲，变形

                    transform:matrix();//矩阵

transform-origin:50px 50px;(坐标旋转)；top left（点旋转）；

transition(过渡):transform(想要发生过渡的属性，all所有的属性) 过渡完成的时间（2s） 过渡的效果（linear线性的）;多个可以用逗号隔开；

Eg:小三角旋转,飞入效果

阴影

box-shadow:10px(水平方向的) 10px（垂直方向） 1（模糊程度）0（向外延的距离） #0f0（颜色）;

(谷歌,苹果)-webkit-box-shadow:10px(水平方向的) 10px（垂直方向） 1（模糊程度）0（向外延的距离） #0f0（颜色）;

（火狐）-moz-box-shadow:10px(水平方向的) 10px（垂直方向） 1（模糊程度）0（向外延的距离） #0f0（颜色）;

(ie8以后)-ms-box-shadow:10px(水平方向的) 10px（垂直方向） 1（模糊程度）0（向外延的距离） #0f0（颜色）;

（opera）-o-box-shadow:10px(水平方向的) 10px（垂直方向） 1（模糊程度）0（向外延的距离） #0f0（颜色）;

px是相对单位，在不同的设备上不一样；

透明度：父元素设置opacity:子元素也会有opacity,并且去不掉子元素的opacity，可以用rgba （）

transition过渡(一个状态到另一个状态,中间无其他变化)

transition:过渡的属性 时间 ease（过渡的方式） 延迟时间；

分开写

transition-property:

transition-duration:

transition-timing-function:

transition-delay:

animation动画（复杂变化）

帧：1s最少有24帧；图片组成的；

动画必须要有关键帧

关键帧  @-webkit-keyframes  bigger(名字){

{ 时间的百分比}     0%{

发生变化1的属性

}

50%{

发生变化2的属性

}

100%{

发生变化3的属性

}

}

调用：animation: bigger  3s linear;

调用：animation: bigger  3s linear forwards(最后停在最后一帧)   4（动画执行的次数【infinite无限次】）;//

animation-name:

animation-duration:持续时间

animation-timing-function:

.....

transfrom(3d):

视角的距离：perspective：；属性给父元素加的，多层做3d变化(也只能用一个perspective,，可以给最高级的父级加perspective，下面的父亲加transform-style：preserve-3d;(保持3d))

面试：先旋转后位移/位移再旋转的结果：不一样

旋转时所在坐标轴也会发生变化

perspective-origin(视角原点):50% 50%（默认值（平视） x y）

transform-style：preserve-3d;(保持3d)

 

 

转载于:https://my.oschina.net/u/4045971/blog/3017062