CSSHack、转换、过渡

Luckies
170 阅读7分钟

1. CSSHack

  • what? : 浏览器的类型及版本的不同会造成 CSS 效果不尽相同
  • CSSHack: 针对不同的浏览器编写不同的属性
    • IE6 之前, 不同浏览器间没有兼容性可言; IE6 之后, 浏览器厂家开始寻求标准统一, 但仍允许先前兼容, 于是产生了不同的运行模式
    • 浏览器会根据 DOCTYPE 自动进行模式选择, IE 还可以手动选择运行模式
1.1. 浏览器浏览模式
  1. 标准模式( standard mode ): 完全按照 W3C 的标准显示网页
  2. 准标准模式( almost standard mode ): 支持标准, 但同时向前兼容非标准代码
  3. 混杂模式( quirks mode ): 不按标准解析内容, 以 IE 自己的标准为主

不同的模式, 浏览器对 CSS( 框模型 ) 以及 Javascrpt 解析效果会有不同

在HTML中，可以通过 <!DOCTYPE> 进行模式选择

  1. 触发混杂模式: 不声明 <!DOCTYPE> 即可 采用 IE5.5 内核进行页面渲染
  2. 触发准标准模式: 申明 <!DOCTYPE>
1.2. CSSHack详解

  • CSSHack 的原理: 使用样式属性的 "优先级" 来解决兼容性的问题

  • CSSHack 的实现方式

    1. CSS 类内部 Hack 属性前缀

      1. *: IE6, IE7 -> EX: *color: ...;

      2. +: IE6, IE7 -> EX: +color: ...;

      3. - _: IE6 -> EX: -color: ...; _color: ...;

      4. \0: IE8, IE9, IE10 -> EX: color: red\0;

      5. \9\0: IE9, IE10 -> EX: color: red\9\0;

      • 在 样式属性名称前 或 样式属性值后 增加一些前后缀, 来适配不同的浏览器

    2. CSS 选择器 Hack:

      • 在选择器前 加前缀 识别不同的浏览器
        • * : IE6 能识别
        • *+: IE 能识别

    3. html 头部引用 hack

      • 通过 IE 条件注释完成 hack, 通过条件判断浏览器版本再执行响应内容

      • 条件注释语法:

        <!--[if 条件 IE版本号]>
满足浏览器要执行的内容
<! [endif] -->

        • 版本号: 6~10

        • 省略版本号, 判断是否为IE浏览器

        • 条件:

          1. gt: 判断当前浏览器是否大于指定版本的浏览器

          2. gte: 判断当前浏览器是否大于等于指定版本的浏览器

          3. lt: 判断当前浏览器是否小于指定版本浏览器

          4. lte: 判断当前浏览器是否小于等于指定版本浏览器

          5. !: 判断当前浏览器是否是非指定版本浏览器

          6. 省略条件: 判断当前浏览器是否是指定版本浏览器

            <!--[if IE 6] >
只在IE6中执行
<![endif]-->

2. 转换

2.1. 转换介绍

改变元素在页面中的位置, 大小, 角度以及形状的一种效果

  • 在 CSS 中允许向元素应用 2D转换 或 3D转换 效果

    1. 2D转换: 让元素在 x轴 和 y轴 做转换效果
    2. 3D转换: 在2D基础上, 增加了对 z轴 的转换效果

  • 语法:

    • 属性: transform
    • 取值: 1. none: 默认值, 无任何转换效果 2. 一组转换函数: 表示一个 或 多个转换函数, 中间用 空格 分开 -> EX: transform: translate(50px) rotate(45deg);

  • 转换原点:

    • 属性: transform-origin

    • 取值:

      1. 取两个值, 表示原点在x轴和y轴上的位置( 2D转换 ), 值用空格分开

        • 元素的左上角: 0px 0px 或 0% 0% 或 自定义 left top 值

      2. 取三个值 表示原点在 x, y, z 轴上的位置

      3. 默认原点位置: 在元素的中心位置处( 50% 50% 或 center center )

      4. 注意: 至少给两个值, 没有一个值的写法

2.2. 2D转换
2.2.1. 2D的位移
  1. what ? : 改变元素在页面中的位置
  2. 语法:
    • 属性: transform
    • 函数:
      1. translate(x): 在 x 轴的位移距离
        • x值: 取值为正, 元素右移
        • x值: 取值为负, 元素左移
      2. translate(x,y): 既在 x 轴位移 又在 y 轴位移
        • y值: 取值为正, 元素下移
        • y值: 取值为负, 元素上移
      3. 单项位移函数: translatex(x) 或 translatey(y)
2.2.2. 2D的缩放
  1. what? : 改变元素的尺寸
  2. 语法:
    • 属性: transform
    • 函数:
      1. scale(value):
        • value: 表示 x轴 和 y轴 的缩放比例
        • 取值: 1. 1: 原始大小 2. >1: 放大比例 3. 1>value>0: 缩小的比例 4. 负数: 物极必反( 水平、垂直镜像后放大 )
      2. scale(x,y): 分别指定 x轴 和 y轴 的缩放比例
      3. scaleX(x) 或 scaleY(y): 指定在 X轴 或 Y轴 的缩放比例
2.2.3. 2D旋转

  1. what ? : 改变元素在页面上的角度

  2. 语法:

    • 属性: transform
    • 函数: rotate(n deg)
      • n: 具体旋转角度
        • 取值为正, 顺时针旋转
        • 取值为负, 逆时针旋转

  3. 注意: 1. 转换原点的位置会影响转换效果

    1. 旋转后, 连同坐标轴也一起旋转 -> 会影响旋转后的位移效果
2.2.4. 2D 倾斜
  1. waht ? : 改变元素的形状
  2. 语法:
    • 属性: transform
    • 函数:
      1. skew(x deg): x轴倾斜, 实际上改变了 "y轴" 的倾斜角度( 值为正, 逆时针), 以至于让元素产生横向倾斜的效果
        • 取值为正( 理解为 Y 轴往 X 轴正向即右边移动, y正值在下 ), Y 轴按逆时针产生倾斜角度
        • 取值为负，Y 轴按顺时针产生倾斜角度
      2. skewX(x deg): 同上
      3. skewY(y deg): Y 轴倾斜, 实际上改变了 "x轴" 的倾斜角度, 以至于让元素产生纵向倾斜的效果
        • 取值为正, X 轴按顺时针产生倾斜角度
        • 取值为负, X 轴按逆时针产生倾斜角度
3. 3D 转换

3D 转换是在 2D 转换的基础之上多了一根 Z 轴转换效果

3.1. 语法

  • 属性: perspective

  • 作用: 模拟人的眼睛到 3D 投射平面的距离

    • 取值越大, 相当于离 3D 转换物体越远, 越不明显
    • 取值越小, 相当于离3D转换物体越近, 越明显

  • 注意: 该属性要加在 3D 转换元素的父元素上, 子元素呈现出 3D 转换效果

  • 浏览器兼容性: chrome&Safari: -webkit-perspective: ...px;

3.2. 3D旋转

  • 属性: transform

  • 函数: 1. rotateX(x deg): 以 X 轴为中心轴, 旋转元素

    1. rotateY(y deg): 以 Y 轴为中心轴, 旋转元素

    2. rotateZ(z deg): 以 Z 轴为中心轴, 旋转元素

    3. rotate3d(x, y, z, n deg):

      • x, y, z 取值为1: 说明该轴要参与旋转

      • x, y, z 取值为0: 说明该轴不参与旋转

      • EX: rotate3d(1, 0, 0, 45deg) , rotate3d(0, 1, 0, 45deg) , rotate3d(0, 1, 1, 45deg)

        • transform: rotate3d(1, 1, 1, 45deg) 等同于 transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg)

      • 注意: 1. 取值为正, 都为顺时针旋转

        1. 取值为负，都为逆时针旋转
3.3. 3D位移

在 2D 位移基础上, 增加在 Z 轴上的位移距离

  • 属性: transform

    • 函数:
      1. translateZ(value)``translate
      2. 3d(value, value, value)

  • 属性: transform-style: 写在父元素上 控制子元素是否呈现 3D 转换效果

    • 取值: 1. flat: 默认值 所有子元素在2D平面呈现 不保留子元素的 3D 位置

      1. prespective-3d: 所有子元素在3D空间中呈现 保留子元素的 3D 位置

    • 注意: 使用此属性必须先使用 transform 属性

3. 过渡

3.1. 什么是过渡

过渡( transition ), 使得 CSS 属性值在一段时间内平滑过渡的效果

3.2. 过渡的要素 & 属性
3.2.1. 过渡属性

  • 作用: 指定 哪个属性值 在变化的时候采用过渡的效果体现出来

  • 语法:

    • 属性: transition-property
      • 取值: 1. none: 默认值 任何属性值变化时都不采用过渡效果 2. all: 所有 任何属性值在变化时, 都采用过渡效果 3. propertyName: 要采用过渡效果的属性名称
      • EX: 背景颜色变化时, 将采用过渡效果实现 -> transition-property: background-color;

  • 允许使用过渡的属性: 1. 颜色属性

    1. 取值为数值的属性: width, height, margin, left, bottom, top, right......
    2. 转换属性: transform
    3. 渐变
    4. visibility
    5. 阴影
3.2.2. 过渡时间

  • 作用: 指定过渡效果在多长时间内完成

  • 语法:

    • 属性: transition-duration

      • 取值: 以 s 或 ms 为单位数值 -> 1000ms = 1s

      • 注意: 默认为 0 -> 无任何过渡效果产生

    • Ex: 让过渡效果在2秒内完成 -> transition-property: background-color; transition-duration: 2s;

3.2.3. 过渡的速度时间曲线函数( 速率 )

  • 语法:

    • 属性: transition-timing-function

      • 取值: 1. ease: 默认 先慢 后快 再慢

        1. linear: 匀速
        2. ease-in: 慢速开始, 加速结束
        3. ease-out: 快速开始, 减速结束
        4. ease-in-out: 先慢, 后快, 再慢( 显示较激烈 )

      • Ex: 指定变化速率为匀速

        selector{
  transition-peoperty: backgound-color;
  transition-duration: 2s;
  transition-timing-function: linear;
}
3.2.4. 过渡延迟
  • 作用: 激发操作后, 等待多长时间后, 再执行变化效果
  • 语法:
    • 属性: transition-delay
      • 取值: 以秒或者毫秒为单位的数值
3.2.5. 属性简写

  • 语法: transition: property duration timing-function delay

  • 注意: 前两者必须给值

  • 两个属性过渡时: transition: property1 duraion1 timing-function1 delay1, property2 duration2

avatar
文章
阅读
粉丝