CSS入门详解（五）

接上文。

• 定位

  • position ：规定应用于元素的定位方法的类型，属性值可以是static（静态，不会以任何特殊方式定位），relative（相对于其正常位置进行定位），fixed（相对于视口定位），absolute（相对于最近的定位祖先元素进行定位），sticky（根据用户的滚动位置进行定位）。

• 溢出

  • overflow ：指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。属性值有visible （默认，溢出没有被剪裁，内容在元素框外渲染），hidden （ 溢出被剪裁，其余内容将不可见），scroll（ 溢出被剪裁，同时添加滚动条以查看其余内容），auto（仅在必要时添加滚动条）。

• 变形

  • transform：指向元素应用2D或3D转换，可以让元素旋转、缩放、扭曲或倾斜，属性值一般是一个函数：
    • translate(tx [,ty])，该函数设置HTML元素沿X轴移动tx距离,沿Y轴移动ty距离。
    • translate3d(tx, ty, tz):该函数设置HTML元素沿X轴移动tx距离，沿Y轴移动ty距离，沿Z轴移动tz距离。
    • translateX(tx):该函数设置HTML元素沿X轴移动tx距离。
    • translateY(ty):该函数设置HTML元素沿Y轴移动ty距离。
    • translateZ(tz):该函数设置HTML元素沿Z轴移动tz距离。
    • scale(sx,sy):该函数设置HTML元素沿X轴方向缩放比为sx，沿Y轴方向缩放比为sy。
    • scale3d(sx,sy,sz):该函数设置HTML元素沿X轴方向缩放比为sx，沿Y轴方向缩放比为sy，沿Z轴方向缩放比为sz。
    • scaleX(sx):该函数相当于执行scale(sx,1)。
    • scaleY(sy):该函数相当于执行scale(1, sy)。
    • scaleZ(sz):该函数相当于执行scale(1,1, sz)。
    • rotate(angle):该函数设置HTML元素绕Z轴顺时针转过angle角度。
    • rotate3d(x,y,z,angle):该函数设置HTML元素绕指定轴(x、y、z参数代表旋转轴的方向）顺时针转过angle角度。
    • rotateX(angle):该函数设置HTML元素绕X轴顺时针转过angle角度。
    • rotateY(angle):该函数设置HTML元素绕Y轴顺时针转过angle角度。
    • rotateZ(angle):该函数设置HTML元素绕Z轴顺时针转过angle角度。
    • skew(sx [, sy]):该函数设置HTML元素沿着X轴倾斜sx角度，沿着Y轴倾斜sy角度。
    • skewX(xAngle):该函数设置HTML元素沿着X轴倾斜xAngle角度。

• 过渡

  • transition：将以下四个过渡属性设置为单一属性。
  • transition-delay：规定过渡效果的延迟（以秒计），属性值为数字。
  • transition-duration：规定过渡效果要持续多少秒或毫秒。
  • transition-property：规定过渡效果所针对的 CSS 属性的名称。
  • transition-timing-function：规定过渡效果的速度曲线。属性值有ease（规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束），linear（规定从开始到结束具有相同速度的过渡效果），ease-in（规定缓慢开始的过渡效果），ease-out（规定缓慢结束的过渡效果），ease-in-out（规定开始和结束较慢的过渡效果），cubic-bezier(n,n,n,n) （允许在三次贝塞尔函数中定义自己的值）。
  • 代码示例

    transition: transform 3.5s ease, background 3.5s ease, width 3.5s ease;

• 动画

  • @keyframes：指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。
  • animation-name：指定动画名称。该属性指定一个已有的关键帧定义。
  • animation-duration：定义需要多长时间才能完成动画。
  • animation-delay：属性规定动画开始的延迟时间。
  • animation-iteration-count：属性指定动画应运行的次数。
  • animation-direction：指定是向前播放、向后播放还是交替播放动画。属性值有normal（动画正常播放），reverse（动画以反方向播放），alternate（动画先向前播放，然后向后），alternate-reverse（动画先向后播放，然后向前）。
  • animation-timing-function：属性规定动画的速度曲线。属性值有ease（指定从慢速开始，然后加快，然后缓慢结束的动画），linear（规定从开始到结束的速度相同的动画），ease-in（规定慢速开始的动画），ease-out（规定慢速结束的动画），ease-in-out（指定开始和结束较慢的动画）。
  • animation-fill-mode：规定目标元素的样式。
  • animation：以上几种属性的简写。