somboy 2020-02-29
一、css3的过渡属性:
1,transition-property
检索或设置对象中的参与过渡的属性。
2,transition-duration
检索或设置对象过渡的时间。
3,transition-delay
检索或设置对象延迟过渡的时间。
4,transition-timing-function
检索或设置对象过渡的动画属性。
简写方法:
transition:属性值1 属性值2 属性值3 属性值4;
属性值1:需要参与过渡的属性/all(默认值)
能支持过渡的属性都会被选中进行过渡变换。
属性值2:过渡的时间,单位(s ms )(动画持续多久的时间)
属性值3:延迟的时间,单位(s ms)(鼠标放上去延迟的时间,延迟后开始过渡)
属性值4:动画的类型(匀速/linear 匀加速 匀减速 先加速后减速 贝塞尔曲线 。。。)
需要注意的地方:transition 必须通过鼠标事件触发,例如:鼠标滑过 :hover
有了过渡属性,我们还差的就是过渡的动画了,有平移 旋转 放大 缩放 等。这些动画都是在一个2D的平面空间内完成的,这里用到的变形属性就是transform了。
css3-2D位移:
transform:translate(参数1 参数2);(参数就是在坐标轴XY轴上的距离,当然可以为负数,正值往右向下,负值往左向上。)
参数1:在坐标轴X轴移动的距离
参数2:在坐标轴Y轴移动的距离
单独设置X/Y:transform:translateX/Y(参数);
css3-2D缩放:
transform:scale(参数1 参数2);(参数0-1以内为缩小,大于1为放大 相同参数写一个就可以)
参数1:在坐标轴X轴缩放的比例
参数2:在坐标轴Y轴缩放的比例
单独设置X/Y:transform:scaleX/Y(参数);
css3-2D旋转:
transform:rotate(参数);
参数单位deg 默认绕着中心点转)
单独设置X/Y:transform:rotateX/Y(参数);
css3-2D倾斜:
transform:skew(参数)
单位deg
单独设置X/Y:transform:skewX/Y(参数);
这些的变形原点都是默认的中心位置,我们也是可以可以改变的!
transform-origin:水平方向 垂直方向 / left right / 10px 10px / 50%;
如果有两个功能函数呢?
我们一般都是先写位置 再写旋转。这样有一个好处就是比较规范 不容易出BUG,兼容性更好。
/*垂直居中,div上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->