2020-02-21 每日总结

css3

动画效果 

1.变形转换 transform

变形中心点 transform-origin 两个数字确定中心点

//transition: all 1s;//补间动画 all所有类型 1s变形时间

transition-property: width;//应用过渡的属性

transition-duration: 2s;//过渡持续时间

transition-delay: 1s;//过渡效果推迟时间

transition-timing-function: cubic-bezie;//过渡的效果

2d转换

（1）移动translate（x，y） x水平方向 y竖直方向

（2）旋转rotate（40deg）：正数表示顺时针旋转 相反为逆时针

（3）缩放scale（x，y）水平·竖直方向缩放倍数

（4）倾斜 skew（deg，deg）元素按一定角度倾斜

3d转换

（1）旋转 rotateX（deg）rotateY（deg）rotateZ（deg）

（2）移动 translateX（）translateY（）translateZ（）

translate3d（x，y，z）xy可以是像素或百分比 z只能是像素

视距:眼睛到电脑屏幕距离 越近越明显3d 加在旋转元素的父级上

2.过渡变化（translation）

3.动画

在运动对象内

animation：动画名 时间 运动曲线 延迟时间 infinite（播放次数）  alternate（是否反方向运动）

@keyframes 动画名{

from{}//起始位置

to{}//终止位置

0%{}

50%{}

100%{}

}

伪类选择器

.door1::before,.door2::before{

/*伪元素 插入一个元素标签*/

content: "";

z-index: 1;/*z轴的值 越大越优先级*/在几张图片叠在一起时可能使用