浏览器兼容前缀: -ms- ie浏览器 -moz- 火狐浏览器 -webkit- webkit内核的浏览器 -o- 欧朋浏览器
css3渐变: 由一个颜色到另一个颜色之间的平滑过渡,至少两个颜色
渐变用的属性为: background:; background-image:;
线性渐变:由一侧到另一侧的渐变
linear-gradient(方位,颜色1 起始位,颜色2 结束位)
-webkit-linear-gradient()
方位: left right
to left 去左边
to left top 去左上角
top bottom
px %
颜色: 十六进制
颜色单词
rgb() rgba()
起始位,结束位: px %
重复渐变: repeating-linear-gradient()
径向渐变: 由中心向四周的渐变
radial-gradient(方位,形状,大小,颜色1 起始位,颜色2 结束位)
方位: px %
形状:
circle 正圆
ellipse 椭圆
大小:
closest-side:最近边;
farthest-side:最远边;
closest-corner:最近角;
farthest-corner:最远角。
重复径向渐变:
repeating-radial-gradient()
过渡: 由一种状态到另一种状态的平滑现象
transition:过渡属性 过渡时间 延迟时间 过渡动画类型;
transition-property:过渡属性;
transition-duration:过渡时间;
transition-delay:延迟时间;
transition-timing-function:过渡动画类型;
linear 匀速运动
ease 慢慢减速
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速,后减速运动
贝塞尔曲线
变换: transform:功能函数;
功能函数:
位移:
translateX()
translateY()
translate(x)
translate(x,y)
可以为负数
缩放:
scaleX()
scaleY()
scale(xy)
scale(x,y)
可以为负数,只表示是方向
1 默认大小,不变
0-1 缩小
绝对值比1大,放大
旋转:
rotateX()
rotateY()
rotateZ()
rotate(z)
可以为负数
问题: 先旋转,后位置 和 先位移,后旋转 效果一样吗?
不一样,理由是: 先旋转,改变了位移的方向
倾斜:
skewX()
skewY()
skew(x)
skew(x,y)
可以为负数
变形原点:
transform-origin:水平 垂直;
left center right
top center bottom
px %