CSS3 属性

过渡效果

在此之前的效果转变都是瞬时完成的, 较为突兀

元素两种状态下切换样式, 借助 transitio 属性增加平滑过渡效果

写在默认样式和改变样式里面是有区别的

　　写在默认中　　往返都有效果,推荐写在默认中

　　写在伪类中　　只有被触发才有效

相关属性

transition-property　　过渡属性  ( all / 其他具体属性)

transition-duration　　过渡时长  ( s/ms )

transition-timing-function　　过渡速度 ( 匀速 linear / 缓慢开始结束中间加速 默认值 ease / ...   )

transition-delay　　设置延迟  ( s/ms )

支持简写

transition: all 5s ease 3s;分别对应 pro dur tim del

转换属性

实现元素的平移, 旋转, 缩放 借助属性 transform 

取值为 转换函数

平移

指定 水平 和 垂直 的偏移距离 正负代表方向

translate(x,y)

旋转

指定元素的旋转角度 单位为 deg 正负代表顺逆

rotate(ndeg)

缩放

指定缩放比例 取无单位的数值

n > 1 放大

0 < n < 2 缩小

n < 0 数值代表缩放比, 负号代表元素翻转

默认基准点为元素中心点 可用属性 transform-origin: x y; 来选取基准点

scale(n)