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轴的值 越大越优先级*/在几张图片叠在一起时可能使用

你可能感兴趣的:(2020-02-21 每日总结)