设置样式的过度效果
transition-property: none/all;
transition-duration:2s;运动时间,默认是0秒
transition-delay:0s; 延迟时间默认0秒
transition-timing-function:ease;逐渐变慢(默认)
linear匀速 ease-in加速 ease-out减速 ease-in-out先加速再减速*/
1,样式 持续时间 延时 可连写多组每个样式之间使用','隔开
.过度的样式 可以同时指定多个
1,过度的时间 2,过度的样式
transition: 1s width , 2s height , 1s background;
2. 过度的形式
贝塞尔曲线很重要 几乎所有的都能用贝塞尔曲线做出来
网址:http://cubic-bezier.com/#.14,.63,.79,.21
伪类选择器,光标移动到上面时触发,产生动画效果
-------------------------------------------------
transform: 形变属性
平移:translate
平移:translate 给定坐标, 沿着做标轴移动
第一个参数:x轴坐标 第二个参数:y轴坐标 以自身作为参照
可给 数值或者百分比%
旋转角度 单位是deg 以自身中心作为旋转中心
正数沿着顺时针方向 负数逆时针方向
设置形变参考原点 默认值是center top bottom left right
transform: rotateX(45deg);
transform: rotateY(45deg);
scale() 缩放倍数
transform: scale(2.0, 0.5)
大于1表示放大 1以下代表缩小
盒子里的内容也会跟着一起缩放
transform-origin: left; 缩放的原点
transform: scale(0.2, 0.5); 参数XY
transform: scaleX(0.5); 沿着X轴
transform: scaleY(.4); 沿着Y轴
skew() 倾斜
X轴的倾斜:正数逆时针
Y轴的倾斜:正数顺时针
倾斜指的是XY轴的倾斜
transform-origin: left; 设置倾斜的原点
transform: skew(30deg, 30deg); 参数XY
transform: skewX(30deg); 沿着X轴
transform: skewY(30deg); 沿着Y轴
