【Day14】渐变及2D转换

学习内容

• 渐变
• 过渡动画
• 2D效果

渐变

渐变 属性名: background
线性渐变:属性值:linear-gradient
1.to 方位词 方位词 渐变方向 方位词表示 left right top bottom
多组颜色用逗号隔开
linear-gradient(to top right,red,blue);
2.使用角度渐变
linear-gradient(1odeg,red,#ccc);

径向渐变:属性值: radial-gradient

径向渐变的起始位置: center 50% 50% 两个值，第一个值表示水平，第二个值表示垂直
渐变的形状: ellipse 椭圆形 (默认) circle 圆
渐变的大小: 四个值
  closest-side: 最近边
  farthest-side: 最远边
  closest-corner: 最近角 (默认)
  farthest-corner: 最远角

有兼容问题
在谷歌浏览器处理时需加-webkit-浏览器前缀!

重复渐变:
  repeating-linear-gradient 线性重复渐变
  repeating-radial-gradient 径向重复渐变
  百分比写在颜色值后面

过渡动画

过渡动画: transition
属性值:
transition-property: 参与过渡动画的属性名 all none (默认) 不会发生过渡动画
transition-duration: 动画的持续时间: 数值+时间单位
transition-delay: 动画的延迟时间: 数值+时间单位
transition-timing-function: 过渡动画效果:
                        属性值: linear匀速变化
                                ease-in: 越来越快
                                ease-in-out: 先快后慢
                                ease:越来越慢 (加速变慢)
                                ease-out:越来越慢 (匀速变慢)
多组过渡动画 用逗号隔开

2D效果

c3 2D效果
transform: 旋转 倾斜 平移 缩放

平移:
translate(x,y) 逗号隔开两组数值，如果只有一个数值，代表水平方向，x轴
translateX 沿X轴方向平移
translateY 沿Y轴方向平移

缩放:
scale(x,y) x表示水平缩放 y表示垂直方向 只有一个值表示水平和垂直方向
scaleX() scaleY() 单独设置某一方向上的缩放
0-1之间缩小 大于1是放大 等于1是不变 等于o是隐藏元素 也可以为负值

倾斜:
skew(xdeg,ydeg）第一个表示水平倾斜，第二个表示垂直倾斜
skewX skewY 单独设置某一方向上的倾斜

旋转:
rotate(xdeg) 相对于原点中心进行旋转 可以为负值
rotateX() 围绕X轴旋转
rotateY() 围绕Y轴旋转

transform-origin: 变形原点 x y x表示水平，y表示垂直方向 也可以是方位词