css高级应用

使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。

css高级应用

• 主题
  • transform-property属性
    • none：没有属性会获得过度效果
    • all：所有属性都获得过度效果
    • property：定义应用过渡效果的css属性名称，多个名称之间以英文逗号隔开
  • transform-duration属性
    • 用于定义过度效果花费的时间
  • transform-timing-function属性
    • cubic-bezier（n,n,n,n):定义用于加速或者减速的贝塞尔曲线的形状，n的值为0~1之间
    • linear：指定以相同速度开始至结束的过渡效果，等同于cubic-bezier（0，0，1，1）
    • ease：指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier（0.25，1，0.25，1）
    • ease-in：指定以慢速开始，然后逐渐加（淡入效果）的过渡效果，等同于cubic-bezier（0.42，0，1，1）
    • ease-out：指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier（0，0,0.58，1）
    • ease-in-out:指定以慢速开始和结束的过渡效果，等同于cubic-bezier（0.42，0，0.58，1）
  • transform-delay属性
    • 规定过渡效果何时开始
  • transform-属性
    • 是一个复合属性，用于在一个属性中设置transition-property，transition-duration，transition-timing-function，transition-delay4个过渡属性
• 变形
  • 2D变形，transform属性
    • translate（）
      • 重新定义元素的坐标，实现平移的效果
    • scale（）
      • 用于缩放元素大小
    • skew（）
      • 能够让元素倾斜显示
    • rotate（）
      • 能i够旋转指定的元素，主要在二维空间内进行操作
    • transform-origin
      • 更改变换的中心点
  • 3D变形
    • rotateX（）
      • 用于指定元素围绕X轴旋转
    • rotateY（）
      • 用于指定一个元素围绕Y轴旋转
    • rotateZ（）
      • 用于指定一个元素围绕Z轴旋转
    • rotate3D（）
      • 轴的旋转是围绕一个{x.y,z}向量。并经过元素原点
  • 其他变形属性
    • transform-style
      • 规定元素如何在3d空间中显示
    • perspective
      • 规定3d元素透视效果
    • perspective-origin
      • 规定3d元素的底部位置
    • backface-visibility
      • 定义元素在不面对屏幕时是否可见
• 动画
  • @keyframes
    • 关键帧属性用于创建动画
  • animation-name
    • 用于定义要应用的动画名称
  • animation-duration
    • 用于定义整个动画效果完成所需要的时间
  • animation-timing-function
    • 用来规定动画的速度曲线，可以定义使用哪种方法来执行动画效果