一, CSS3 盒子 阴影 属性 box- shadow 也是 CSS3 新增 的 一个 重要 属性, 用来 定义 元素 的 盒子 阴影。
主轴和侧轴在 Flexbox 模型中与布局计算偏向使用书写模式方向的块布局与行内布局不同, 伸缩 布局 偏向 使用 伸缩 流的 方向。一个 row伸缩容器中各种方向与大小术语
·主轴、主轴方向: 用户代理沿着一个伸缩容的主轴配置伸缩项目, 主轴是主轴方向的延伸。 伸缩容器的主轴, 伸缩项目主要沿着这条轴进行布局。 小心, 它不一定是水平的, 这主要取决于 justify- content 属性。 如果 其 取值 为 column, 主轴的方向为纵向的。
·主轴起点、主轴终点: 伸缩项目的配置从容器的主轴起点边开始, 往主轴终点边结束。 也就是说, 伸缩项目放置在伸缩容器内从主轴起点( main- start) 向主轴终点( main- end)方向。
·主轴长度、主轴长度属性: 伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度, 伸缩项目的主轴长度属性是 width 或 height 属性, 由哪一个对着主轴方向决定。
·侧轴、侧轴方向: 与主轴垂直的轴称做侧轴, 侧轴是侧轴方向的延伸。 主要取决于主轴方向。
·侧轴起点、侧轴终点: 填满项目的伸缩行的配置配置从容器的侧轴起点边开始, 往侧轴终点边结束。
·侧轴长度、 侧轴长度属性: 伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度, 伸缩项目的侧轴长度属性是 width 或 height 属性, 由 一个 对着 侧 轴 方向 决定。
31. 伸缩容器和伸缩项目通过 display 属性显式地给 一个元素 设置为 flex或者inline- flex, 这个容器就是一个伸缩容器。 伸缩容器会为其内容创立新的伸缩 格式化上下文, 其中设置为 flex 的容器 被 渲染为 一个块级元素, 而设置 为inline- flex 的容器则渲染 为 一个行内元素。 若 元素 display 的 指定 值 是 inline- flex 且元素 是一 个浮动或绝对定位元素, 则 display 的计算值是flex。 一个伸缩容器的内容具有零个以上的伸缩项目—— 伸缩容器的每个子元素( 除了 需要 盒 修复 的 元素 之外) 都会成为 一个伸缩项目, 且用户代理会将任何直接在伸缩容器里的连续文字块包起来 成为 匿名伸缩项目。
32. 伸缩容器的属性Flexbox伸缩布局中伸缩容器和伸缩项目是伸缩布局模块中的重要部分, 其中每一部分都具有各自的属性。 伸缩容器的属性包括以下几个:
1) 伸缩流方向。 是指伸缩容器的主轴方向, 其决定了伸缩项目放置在伸缩容器的方向。 伸缩流方向主要通过flex- direction属性来设置, 其默认值为row。 伸缩流方向和书写模式有关系, 换句话说, 伸缩项目根据书写模式的方向布局。
2) 伸缩行换行。 伸缩项目在伸缩容器中有时候也会溢出伸缩容器。 与传统的盒模型一样, CSS允许使用overflow属性来处理溢出内容的显示方式。 在伸缩容器中有一个伸缩换行属性, 主要用来 设置伸缩容器的伸缩项目是单行显示还是多行显示, 以及决定侧轴的方向。 使用此属性来启用溢出的伸缩容器的伸缩项目自动换行到下一行以及控制流动方向。 在伸缩容器属性中, 主要通过 flex- wrap 属性来设置伸缩项目是否换行, 默认值为 nowrap。
3) 伸缩方向与换行。 是 伸缩 流 方向 与 伸缩 换行 的 结 合物, 换句话说, 伸缩 方向 与 换行 属性 flex- flow 同时 设定 了 伸缩 流 方向 flex- direction 和 伸缩 换行 flex- wrap 两个 属性, 简而言之 是 这 两个 属性 的 缩写, 这 两个 属性 决定了 伸缩 容器 的 主轴 与 侧 轴。
4) 主轴对齐。 用来设置伸缩容器当前行伸缩项目在主轴方向的对齐方式, 指定 如何 在 伸缩 项目 之间 分布 伸缩 容器 额外 空间。 当 一 行上 的 所 伸缩 项目 不能 伸缩 或 可伸缩 但 已达 到 最大 长度 时, 这一 属性 才会 对 伸缩 容器 额外 空间 进行 分配。 当 伸缩 项目 溢出 某 一行 时, 这一 属性 也会 在 项目 的 对齐 上 施加 一些 控制。
5) 侧轴对齐。 伸缩 项目 可以 在 伸缩 容器 当前 行的 侧 轴上 进行 对齐, 这类 似于 主轴 对齐 方式, 只是 另一个 方向。 也就是说 侧 轴 对齐 主要 用来 指定 伸缩 项目 在 伸缩 容器 中 如何 放置 和 对齐 的 方式。 换句话说, 用来 定义 伸缩 项目 在 伸缩 容器 的 当前 行的 侧 轴上 对齐 方式。
6) 堆栈伸缩行。 用来 定义 伸缩 容器 中 伸缩 项目 行在 侧 轴 的 对齐 方式, 类似于 侧 轴 对齐, 只不过 这是 用来 控制 伸缩 项目 行在 布局 轴 的 堆放 方式。
33. 伸缩项目的属性一个伸缩项目是一 个伸缩容器的子元素。 伸缩容器中的文本也被视为一个 伸缩项目。 伸缩 项目 中 内容 与 普通 流 一样。 比如说, 当 一个 伸缩 项目 被 设置 为 浮动, 依然 可以 在这 个 伸缩 项目 中 放置 一个 浮动 元素。 伸缩 项目 都有 一个 主轴 长度 和 一个 侧 轴 长度。 主轴 长度 是 伸缩 项目 在 主 轴上 的 尺寸, 侧 轴 长度 是 伸缩 项目 在 侧 轴上 的 尺寸。 或者说,一个 伸缩 项目 的 宽度 或 高 取决于 伸缩 容器 的 轴, 可能 就是 它的 主轴 长度 或侧 轴 长度。 下面 的 几个 属性 可以 调整 伸缩 项目 的 行为:
1) 显示顺序。 伸缩 容器 中的 伸缩 项目 默认 显示 顺序 是 遵循 文档 在 源 码 中的 出现 的 先后 顺序( HTML 文档 的 DOM 结构 中的 先后 顺序)。 可以 通过 伸缩 项目 的 显示 顺序 修改 伸缩 项目 在 页面 中 显示 顺序, 也可以 通过 这个 属性 对 伸缩 项目 进行 排序 组合。
2) 侧轴对齐。 包括 两种, 一种 是 align- items 属性, 可以 用来 设置 伸缩 容器 中 包括 匿名 伸缩 项目 的 所有 项目 的 对齐 方式; 另一种 是 align- self 属性, 主要 用来 在 单独 的 伸缩 项 目上 覆 写 默认 的 对齐 方式。 对于 匿名 伸缩 项目, align- self 的 值 永远 与其 关联 的 伸缩 容器 的 align- items 的 值 相同。
3) 伸缩性。 定义 伸缩 项目 可改变 它们 的 宽度 或 高度 填补 可用 的 空间。 可以 将 伸缩 容器 的 额外 空间 分 发给 其 伸缩 项目( 与 伸缩 项 目的 正 弹性 成正比) 或将 它们 缩小 以防 止 伸缩 项目 溢出( 与 伸缩 项 目的 负 弹性 成正比)。
34. 伸缩行伸缩项目 沿着 伸缩 容器 内 的 一个 伸缩 行 定位。 伸缩 容器 可以 是 单行 的, 也可以 是 多 行的。 其 主 要由 flex- warp 属性 决定。 单行 的 伸缩 容器 会 将其 所有 子 元素 在 单独 的 一行 上进 行 布局, 这种 情况 之下 有可能 导致 内容 溢出 伸缩 容器; 多 行的 伸缩 窗口 会 将其 伸缩 项目 配置 在 多个 伸缩 行上, 这类 似于 文本 的 排列。 当 文本 过宽 导致 一行 无法 容纳 时, 内容 会 断开 并 移至 新的 一行。 当 用户 代理 创建 新的 伸缩 行 时, 这些 伸缩 行会 根据 flex- wrap 属性 沿着 侧 轴 进行 堆叠。 除非 伸缩 容器 本身 是 空的, 每一个 伸缩 行 至少 包含 一个 伸缩 项目。
:Flexbox 模型规范状态
Flexbox布局的语法规范经过几年发生了很大的变化,也给 Flexbox 的使用带来一定的局限性, 因为语法规范版本众多, 浏览器支持不一致, 致使 Flexbox 布局使用不多。 Flexbox 语法规范主要经历 了以下阶段。
1) 2009 年 07 月 工作 草案( display: box)
2) 2011 年 03 月 工作 草案( display: flexbox)
3) 2011 年 11 月 工作 草案( display: flexbox)
4) 2012 年 03 月 工作 草案( display: flexbox)
5) 2012 年 06 月 工作 草案( display: flex)
6) 2012 年 09 月 候选 推荐( display: flex)
把 Flexbox 布局 语法 规范 主要 分成 三种。
·旧版本( Old),2009年版本, 使用 display: box 或者display: inline- box。
·混合版本( Hybrid),2011年版本,使用display: flexbox 或者display: inline- flexbox。
·最新版本( Modern),使用display: flex或者display: inline- flex。
:如何辨别旧Flexbox和新Flexbox
·看到“ display: box”或者“ box-{}” 属性, 说明 是 2009 年 版本 的 Flexbox。
·看到“ display: flexbox” 或者“ flex()”函数, 说明 是 2011 年 版本, 也称 为 Flexbox 混合 版本。
·看到“ display: flex” 或者“ flex-{}”属性, 说明 是 当前 规范, 也就是 W3C 标准 规范 版本 的 Flexbox。
:伸缩容器设置display要改变元素的模式, 需要使用display属性, 如果在让一个元素变成伸缩容器, 也离不开display属性。
属性值主要有两种。
·box: 设置为块伸缩容器。
·inline- box: 设置为内联级伸缩容器。
:伸缩流方向 box- orient伸缩 流 方向 box- orient 属性 主要用来创建主轴, 从而定义了伸缩项目在伸缩容器中的流动布方向。 换句话说主要用来指定伸缩项目如何放置在伸缩容器的主轴上。
伸缩流方向 box- orient主要适用于伸缩容器。 伸缩流方向主要是用来确定伸缩项目在伸缩容器中的流动布局方向,该属性主要有四个属性值, 其取值说明如下:
·horizontal: 伸缩项目在伸缩容器中从左到右在一条不平线上排列显示。
·vertical: 伸缩项目在伸缩容器中从上到下在一条垂直线上排列显示。
·inline- axis: 伸缩项目沿着内联轴排列显示。
·block- axis: 伸缩项目沿着块轴排列显示。
伸缩流方向和文本书写模式也有关系, 如果书写模式是ltr, 表示排版本方向从左向右, 如果书写模式是rtl表示排版方向从右向左排列。 伸缩流的取值为 horizontal 和 inline- axis 时, 确认伸缩项目的 伸缩流方向和书写模式的方向关连性非常的强。 可以说书写模式直接影响了它们的排列方向。
。。。。。。
十一, CSS3 渐变,渐变是两种或多种颜色之间的平滑过渡。
35. CSS3线性渐变在线性渐变过程中, 颜色沿着一条直线过渡: 从左侧到右侧、 从右侧到左侧、 从顶部到底部、 从底部到顶部或沿任意轴。 如果使用过制作 Photoshop 等软件, 对线性渐变并不会 陌生。 CSS3制作渐变效果, 其实和使用制作软件中的渐变工具没有什么差别。 首先指定一个渐变的方向、 起始颜色、 结束颜色。 具有这三个 数就可以制作 一个最简单、 最普通的渐变效果。 如果 制作一个复杂的多色渐变效果, 就需要在同一个渐变方向增添多个色 标。 具备这些渐变参数( 至少三个), 各浏览器就会绘制与渐变线垂直的颜色结来填充整个容器。 浏览器渲染出来的效果就 类似于制作软件设计出来的渐变图像。
:CSS3线性渐变,(linear-gradient)
1:颜色从顶部向底部渐变 简单的方法直接使用“ to top”关键词, 表示第一颜色向第二颜色渐变。 实现类似于“ to top”效果还可以使用角度值“ 0deg”、“ 360deg” 和“- 360deg”。
2:颜色从底部向顶部渐变 关键词“ to bottom” 刚好 与“ to top” 相反, 从底部向顶部实现渐变效果。 也可以使用角度值“ 180deg” 和“- 180deg” 实现同等效果。
3:颜色从左向右渐变“to left”关键词实现了从左向右颜色渐变, 也可以通过角度值“ 90deg” 和“ 270deg”实现。
4:颜色从右向左渐变 “to right” 正好与“ to left” 效果相反。 实现了颜色从右向左直线渐变, 也可以使用角度值“ 90deg” 和“- 270deg”。
5:从右下角向左上角线性渐变 “to top left” 实现从右下角向左角线性渐变。
6:从左下角到右上角线性渐变 “to top right” 关键词实现左下角到右上角的线性渐变。
7:从右上角到左下角线性渐变 “to bottom left” 关键词实现了右上角向左下角直线渐变。
8:从左上角向右下角线性渐变 “to bottom right” 关键词实现了左上角向右下角直线渐变。
CSS3 制作 渐变 按钮
Web页面或者说Web程序应用中, 按钮是设计中的一个重要元素, 也是设计师非常重视的一个设计元素。 设计师借助Photoshop等软件实现按钮效果, 然后通过图片的方式转用到Web页面中或者 Web应用程序中。 这种方法安全、 兼容性较强, 实现方法也简单, 但适应能力比较弱、 重用性、 可扩展性、 维护性差。 例如, 修改一个按钮的颜色, 必须先从制作软件中修改好, 再次切 图, 最后替换 Web页面中的图片。 CSS3 的渐变出现后, Web设计师可以摆脱Photoshop的束缚, 特别是在配合CSS3的阴影、 圆角和@font- face等属性, 可以直接脱离制图软件, 直接使用CSS快速 设计各种精巧、靓丽、 细腻的按钮( 几乎可以和设计软件制作出来的效果一模一样)。 通过CSS3属性制作的按钮与设计软件制作的按钮相比, 有以下几大优势:
·灵活性、 可扩展性强: 可以通过CSS3的属性可以直接修改按钮的大小、 背景等效 果。
·可以减少http请求, 提高页面的加载性能。
·可以应用到任何的HTML标签元素, 如 a、 input、 button、 span 和 div 等。 ·可以支持按钮多种状态效果, 比如当前状态、 悬停状态和点击状态。
·完全兼容不支持 CSS3 的浏览器, 如果不兼容CSS3, 则显示没有渐变和阴影的普通效果。
:CSS3径向渐变,(radial-gradient)
CSS3径向渐变是圆形或椭圆形渐变。 颜色不再沿着一条直线轴变化, 而是从一个起点朝所有方向混合。 但相对线 渐变要比径向渐变复杂得多。
CSS3 径向渐变的属性参数
CSS3的径向渐变相对于线性渐变要复杂得多, 属性参数也繁多复杂。 CSS3径向变中新旧语法中的属性参数定义如下:
1.< position>主要用来定义径向渐变的圆心位置。 此值类似于CSS中background- position属性, 用于确定元素渐变的中心位置。 如果这个参数省略了, 其默认值为 center。 其值主要有以下几种: ·: 用长度值指定径向渐变圆心的横坐标或纵坐标, 可以为负值。
·: 用百分比指定径向渐变圆心的横坐标或纵坐标, 可以为负值。
·center: 设置中间为径向渐变圆心的横坐标值或纵坐标。
·top: 设置顶部为径向渐变圆心的纵标值。
·right: 设置右边为径向渐变圆心的横坐标值。
·bottom: 设置底部为径向渐变圆心的纵标值。
·left: 设置左边为径向渐圆心的横坐标值。
2.< shape> 主要用来定义径向渐变的形状。 其主要包括两个值circle 和ellipse:
·circle: 如果< size> 和< length> 大小相等, 径向渐变是一 个圆形, 也就是用来指定圆形的径向渐变。
·ellipse: 如果< size> 和< length> 大小不相等, 径向渐变是一个椭圆形, 也就是用来指定椭圆形的径向渐变。
3.< size>用来确定径向渐变的结束形状大小。 如果省略, 其默认值为 farthest- corner。 可以给其显式地设置一些关键词。
·closest- side: 指定径向渐变的半径长度为从圆心到离圆心最近的边。
·closest- corner: 指定径向渐变的半径长度为从圆心到圆心 最近的角。
·farthest- side: 指定径向渐变的半径长度为从圆心到离圆心最远的边。
·farthest- corner: 指定径向渐变的半径长度为从圆心到离圆心最远的角。 如果< shape>设置 为circle或者省略,< size> 可能显式设置为< length>。 表示用长度值指定径向渐变的横向或纵向直径 长度, 并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆, 不能为负值。
4.< color- stop> 径向渐变线上的停止颜色, 类似于线性渐变的< color- stop>, 渐变线从中心点向右扩散。 其中0%表示渐变线的起始点, 100%表示渐变线的与渐变容器相交结束的位置, 而且其 颜色停止可以定义一个负值。
:CSS3重复线性渐变
可以使用重复线性渐变repeating-linear-gradient 属性代替线性渐变linear-gradient。 它们采取相同的值, 但色标在两个方向上都无限重复。 不过使用百分比设置色标的位置没有多大的意义, 但 使用像素和其他的单位重复线性渐变可以创建一些很酷的效果,
:CSS3重复径向渐变
以同样的方式, 使用相关的属性创建重复的径向渐变, 其语法和radial- gradient 类似, 只是以一个径向渐变为基础进行重复渐变,
在CSS3中渐变特性主要包括
线性渐变( linear- gradient)、
径向渐变( radial- gradient)、
重复线性渐变( repeating- linear- gradient)
重复径向渐变( repeating- radial- gradient) 四种。其中线性渐变和重复线性渐变语法相同, 而径向渐变和重复径向渐变的语法相同。
从本质上说, 渐变就是背景属性中的background-image, 浏览器直接将渐变生成图片, 可以直接使用 CSS 背景属性来控制它们。
。。。。。。
十二,CSS3变形
CSS2. 1 中的页面都是静态的, 网页设计师也习惯把它作为页面效果的设计工具。 多年来, Web设计师依赖于图片、 Flash或 JavaScript才能完成修改页面的外观。 CSS3将改变设计师这种思维,借助 CSS3可以轻松 倾斜、 缩放、 移动 以及翻转元素。
2012年9月, W3C组织发布了CSS3变形工作草案。 允许CSS把元素转变为2D或3D空间, 这个草案包括了CSS32D变形和CSS33D变形。 CSS3变形是一 些效果的集合, 比如 平移、 旋转、 缩放 和 倾斜效果, 每个效果都称为变形函数( Transform Function), 它们可以操控元素发生旋转、 缩放、 平移 等 变化。 这些效果在之前都需要依赖图片、 Flash或 JavaScript才能完成。 而使用纯 CSS 来完成 这些变形无须加载这些额外的文件, 再一次提升了开发效率, 提高了页面的执行效率。
CSS 变形属性及函数
CSS 变形允许动态的控制元素, 可以在屏幕周围移动它们, 缩小或扩大、 旋转, 或结合所有这些产生复杂的动画效果。 通过CSS变形, 可以让元素生成静态视觉效果, 也可以很容易结合CSS3的 transition和动画的keyframe产生 一些动画效果:
·CSS3变形中具有 X/ Y可用的函数: translateX()、 translateY()、 scaleX()、 scaleY()、 skewX() 和 skewY()。
·CSS32D变形函数包括: translate()、 scale()、 rotate() 和 skew()。 translate()函数接受CSS的标准度量单位; scale()函数接受 一个 0 ~ 1 之间的十进制值; rotate() 和 skew() 两个函数都接受 一个径向的度量单位值deg。 除了rotate()函数之外, 每个函数都接受X轴和Y轴的参数。 2D变形中还有一个矩阵matrix()函数, 包括6个参数。
·CSS3 3D变形函数包括: rotateX()、 rotateY()、 rotate3d()、 translateZ()、 translate3d()、 scaleZ() 和scale3d()。 3D变形中也包括一个矩阵matrix3d()函数, 包括16 个参数。
CSS 变形属性详解
transform属性指一组转换函数, transform-origin属性指定元素的中心点在哪, 新增加了第三个数transform-origin-z, 控制元素三维空间中心点。 transform- style的值设置为 preserve- 3d, 建立 一个3D渲染环境。
:CSS3 2D变形
在二维或三维空间, 元素可以被扭曲、 移位或旋转。 只不过2D变形工作在X轴和Y轴, 也就是大家常说的水平轴和垂直轴; 而3D变形工作在X轴和Y轴之外, 还有一个Z 轴, 这些3D变换不仅可以 定义元素的长度和宽度, 还有深度。 首先讨论元素在2D平面如何变换, 然后在进入3D变换的讨论。 CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件, 同时有更多的功能装饰文本 和更多的动画选项来装饰div元素。
2D 位移
在这里 translate是一种方法, 将元素向指定的方向移动, 类似于position中的relative。 可以简单理解为, 使用translate()函数可以把元素从原来的位置移动, 而不影响在 X、 Y 轴上任何组件。
translate() 函数可以取一个值tx,也可以取两个值tx和 ty,
·tx:代表X轴( 横坐标)移动的向量长度, 当其值为正值时, 元素向X轴右方向移动, 反之其值为负值时, 元素向X轴左方向移动。
·ty:代表Y轴( 纵坐标) 移动的向量长度,当其值为正值时, 元素向Y轴下方向移动, 反之其值为负值时, 元素向Y轴上方向移动。 如果ty没有显式设置时, 相当于ty=0。
结合起来, translate()函数移动元素主要有以下三种移动。
·水平移动: 向右移动 translate( tx, 0) 和向左移动 translate(- tx, 0)。
·垂直移动:向上移动 translate( 0,- ty) 和向下移动 translate( 0, ty)。
·对角移动:右下角移动 translate( tx, ty)、右上角移动translate( tx,- ty)、 左上角移动translate(- tx,- ty) 和左下角移动translate(- tx, ty)。
如果要将对象沿着一个方向移动, 如沿着水平轴或者纵轴移动, 可以使用translate( tx, 0) 和translate( 0, ty)来实现。 其实在变形中还为单独一个方向移动对象提供了更简单的方法。
·translateX():水平方向移动一个对象。 通过给定一个X轴方向的数值指定对象沿水平轴方向的位移。简单点说,对象只向X轴进行移动, 如果值为正值, 对象向右移动; 如果值为负值, 对象向左 移动。
·translateY():纵轴方向移动一个对象。 通过给定一个Y轴方向的数值指定对象沿纵轴方向的位移。 简单点说,对象只向Y轴进行移动,如果值为正值,对象向下移动; 如果值为负值,对象 向上 移动。 这两个函数和前面介绍的 translate()函数不同的是每个方法只接受一个值。
·transform: translate(- 100px, 0) 实际上 等于 transform: translateX(- 100px)。
·transform: translate( 0,- 100px) 实际上 等于 transform: translateY(- 100px)。
2D缩放
缩放函数scale()让元素根据中心原点对对象进行缩放, 默认值为 1。 因此0. 01到 0. 99之间的任何值, 使一个元素缩小; 而任何大于或等于 1. 01的值, 让元素显得更大。
缩放scale()函数和translate()函数的语法非常相似, 可以接受一个值, 也可以接受两个值, 只有一个值时, 其第二个值默认与第一个值相等。
其 取值 简单 说明 如下:
·sx:指定横向坐标( X 轴)方向的缩放向量, 如果值为0. 01 ~ 0. 99之间, 会让对象在X 轴方向缩小, 如果值大于或等于1. 01, 对象在X 轴方向放大。
·sy:指定纵向坐标( Y 轴)方向的缩放量, 如果值为 0. 01 ~ 0. 99 之间, 会让对象在Y轴方向缩小, 如果值大于或等于1. 01, 对象在Y 轴方向放大。
·scaleX():相当于 scale( sx, 1)。 表示元素只在X轴( 水平 方向) 缩放元素, 默认值是 1。
·scaleY():相当于 scale( 1, sy)。 表示元素只在Y轴( 纵横 方向) 缩放元素, 默认值是 1。
2D旋转
旋转函数rotate()通过指定的角度参数对元素根据对象原点指定 一个2D旋转。 主要在二维空间内进行操作,接受一个角度值, 用来指定旋转的幅度。 如果这个值为正值, 元素相对原点中心顺时针 旋转; 如果这个值为负值, 元素相对原点中心逆时针旋转。
rotate() 函数只接受一个值a, 代表旋转的角度值。 其取值可以是正的, 也可以是负的。
·取值为正值时, 元素默认相对元素中心点顺时针旋转。
·取值为负值时, 元素默认相对元素中心点逆时针旋转。
2D倾斜
倾斜函数skew()能够让元素倾斜显示, 可以将一个对象以其中心位置围绕着X轴和Y轴 按照一定的角度倾斜。 与rotate()函数的旋转不同, rotate()函数只是旋转, 而不会改变元素的形状。 skew() 函数 不会旋转, 而只会改变元素的形状。
·ax: 指定元素水平方向( X 轴 方向) 倾斜的角度。
·ay: 指定元素垂直方向( Y 轴 方向) 倾斜的角度。
skew() 函数和CSS3变形中的 translate()、 scale()函数一样, 除了可以使用 skew( tx, ty)函数让元素相于元素中心为原点在X轴和Y轴倾斜之外, 还可以使用使用 skewX() 和 skewY() 函数让元素只在 水平或垂直方向倾斜。
·skewX():相当于skew( ax, 0) 和 skew( ax)。按给定的角度沿X轴指定一个倾斜变形。 skewX()使元素以其中心为基点, 并在水平方向( X 轴)进行倾斜变形。
·skewY():相当于skew( 0, ay)。按给定的角度沿Y轴指定一个倾斜变形。 skewY()用来设置元素以其中心为基点并按给定的角度在垂直方向( Y 轴) 倾斜变形。
在默认情况下,skew()函数都是以元素的原中心点对元素进行倾斜变形,但是同样可以根据 transform- origin 属性, 重新设置元素基点对元素进行倾斜变形。另外,skew()函数和制图软件中的变形 工具所起作用类似,
2D矩阵
CSS3中Transform让操作变形变得很简单, 如位移函数translate()、 缩放函数scale()、 旋转函数rotate() 和倾斜函数skew()。 这几个函数很简单, 也很方便, 但是变形中的矩阵函数matrix()不常用。 当然, Web 设计师可以使用 rotate()、 skew()、 scale() 和 translate() 函数来满足它们的变形需要, 那为什么要使用矩阵matrix() 呢? 在CSS3中的变形函数都可以使用matrix()函数来代替。
:CSS3 3D变形
使用二维变形能够改变元素在水平和垂直轴线, 然而还有一个轴沿着它, 可以改变元素。 使用三维变形, 可以改变元素在Z 轴位置。 三维变换使用基于二维变换的相同属性, 如果熟悉二维变换会 发现, 3D变形的功能和2D变换的功能类似。 CSS3中的3D变换主要包括以下几种功能函数:
·3D 位移: 包括 translateZ() 和 translate3d() 两个功能函数。
·3D 旋转: 包括 rotateX()、 rotateY()、 rotateZ() 和 rotate3d() 四个功能函数。
·3D 缩放: 包括 scaleZ() 和 scale3d() 两个功能函数。
·3D 矩阵: 和 2D 变形一样, 也有 一个 3D矩阵功能函数 matrix3d()。
CSS3中3D 位移
主要包括两种函数 translateZ() 和 translate3d()。
36. translate3d()函数的语法translate3d()函数使一个元素在三维空间移动。 这种变形的特点是, 使用三维向量的坐标定义元素在每个方向移动多少。
translate3d( tx, ty, tz)
其属性值取值说明如下:
·tx:代表横向坐标位移向量的长度;
·ty:代表纵向坐标位移向量的长度;
·tz:代表Z轴位移向量的长度。 此值不能是一个百分比值, 如果取值为百分比值, 将会认为无效值。
37. translateZ()函数,功能是让元素在3D空间沿Z轴进行位移,
translate( t)
取值t指的是Z轴的向量位移长度。使用 translateZ()函数可以让元素在Z 轴进行位移,当其值为负值时,元素在Z 轴越移越 远,导致元素变得较小。反之,当其值为正值时,元素在Z轴越移越近, 导致 元素变得较大。
translateZ() 函数在实际使用中等同于translate3d( 0, 0, tz)。仅从视觉效果上看, translateZ() 和 translate3d( 0, 0, tz) 函数功能非常类似于二维空间的 scale() 缩放 函数, 但实际上完全不同。 translateZ() 和 translate3d( 0, 0, tz) 变形是发生在Z轴上, 而不是X轴和Y轴。 当使用3D变形, 能够在Z轴上移动一个元素确实有很大的好处, 比如说在创建一个3D立方体的盒子之时。
CSS3中3D 缩放
scaleZ() 和 scale3d() 函数单独使用时没有任何效果, 需要配合其他的变形函数一起使用才会有效果。
CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数, 当scale3d()中X轴和Y轴同时为1, 即scale3d( 1, 1, sz),其效果等同于scaleZ( sz)。
38. scaleZ()3D缩放函数, 可以让元素在Z轴上按比例缩放。 默认值为1, 当值大于1 时, 元素放大, 小于1大于0. 01时, 元素缩小。
scale3d( sx, sy, sz)
sx: 横向缩放比例
sy: 纵向缩放比例
sz: Z轴缩放比例。
CSS3中 3D 旋转
在三维变形中, 可以让元素在任何轴旋转。 为此, CSS3新增三个旋转函数 rotateX()、 rotateY() 和 rotateZ()。
在 三维空间 里, 使用 rotateX()、 rotateY() 和 rotateZ() 函数 让 一个 元素 围绕 X、 Y、 Z 轴 旋转, 其 基本 语法 如下:
rotateX( a)
rotateY( a)
rotateZ( a)
其中 a 指的是一 个旋转角度值, 其值可以是正值也可以是负值。 如果值为正值, 元素顺时针旋转; 反之, 值为负, 元素围绕逆时针旋转。
rotateZ() 函数 指定 元素 围绕 Z 轴 旋转, 如果 仅 从 视觉 角度 上看, rotateZ() 函数 让 元素 顺时针 或 逆时针 旋转, 并且 效果 和 rotate() 效果 等同, 但不 是在 2D 平面 旋转。 在 三维空间 里, 除了 rotateX()、 rotateY() 和 rotateZ() 函数 可以 让 一个 元素 在 三维空间 中 旋转 之外, 还有 一个 属性 函数 rotate3d()。 在 3D 空间, 旋转 有 三个 角度 来 描述 一个 转动 轴。 轴 的 旋转 是由 一个[ x, y, z] 向量 并经 过 元素 原点。 其 基本 语法 如下:
rotate3d( x, y, z, a) rotate3d() 中 取值 说明。
·x: 0 ~ 1 的 数值, 用来 描述 元素 围绕 X 轴 旋转 的 矢量 值。
·y: 0 ~ 1 的 数值, 用来 描述 元素 围绕 Y 轴 旋转 的 矢量 值。
·z: 0 ~ 1 的 数值, 用来 描述 元素 围绕 Z 轴 旋转 的矢量 值。
·a: 角度 值, 用来 指定 元素 在 3D 空间 旋转 的 角度, 如果 其 值 为 正值, 元素 顺时针 旋转, 反之 元素 逆时针 旋转。 当 x、 y、 z 三个 值 同时 为 0 时, 元素 在 3D 空间 不做 任何 旋转。 当 x、 y、 z 取 不同 值 时, 和 前面 介绍 的 三个 旋转 函数 功能 等同。
·rotateX( a) 函数 功能 等 同于 rotate3d( 1, 0, 0, a)。
·rotateY( a) 函数 功能 等 同于 rotate3d( 0, 1, 0, a)。
·rotateZ( a) 函数 功能 等 同于 rotate3d( 0, 0, 1, a)。
。。。。。。
十三,CSS3 过渡,多年来, Web前端开发人员一直在寻求通过HTML和CSS实现一些动画交互效果, 而不再使用JavaScript 或Flash。 现在他们的愿望实现了。 CSS3除了给我们带来前面介绍的一些 特殊功能模块之外, 还为Web设计师添加了 一些动画功能模块。 可以通过: hover、: focus、: active、: checked 或者JavaScript 触发一个元素, 这样, 外观变化会显得更细腻, 而不会让人感觉“ 一触即发”。 例如 悬浮 修改 链接色, 在 CSS2. 1 中鼠标悬浮时, 立刻从一个颜色变成另一个颜色。 而在CSS3 中使用过渡功能, 鼠标悬浮时, 颜色在一定的时间内, 从一个颜色过渡到另一个 颜色, 给用户更好、 更细腻的体验。
CSS3的过渡功能像是一种黄油, 通过一些CSS的简单动作触发样式平滑过渡。 W3C标准中描述的transition功能很简单: CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种 效果可以在鼠标单击、 获得焦点、 被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。
以往Web中的动画都是依赖于JavaScript和Flash实现, 但原生CSS过渡在客户端上需要处理的资源少得多, 从而显得更加平滑。 CSS3过渡与元素上的常规样式一起声明。 只要目标属性更改, 浏览器 就会应用过渡。 除了使用JavaScript 触发动作外, 在CSS中也可以通过一些伪类来触发, 如: hover、: focus、: active、: target 和: checked 等。 这很重要: 无须在 JavaScript 中编写动画, 只需 要更改一个属性值并依赖浏览器来执行所有重要工作。 以下 是 使用 CSS 创建 简单 过渡 的 步骤:
1) 在默认样式中声明元素的初始状态样式。
2) 声明过渡元素最终状态样式, 比如悬浮状态。
3) 在默认样式中通过添加过渡函数, 添加一些不同的样式。
transition属性是一个复合属性, 出于简洁性和便于维护考虑, 过渡语法通常以简化的形式表达。
transition 属性主要包含四个属性值:
·transition- property: 指定过渡或动态模拟的CSS属性。
·transition- duration: 指定完成过渡所需的时间。
·transition- timing- function: 指定过渡函数。
·transition- delay: 指定过渡开始出现的延迟时间。
指定过渡函数 transition- timing- function transition- timing- function 属性指定某种指代过渡“ 缓动函数” 的属性。 此属性可指定浏览器的过渡速度, 以及过渡期间的操作进展情况, 可以将某个 值指定为预定义函数、 阶梯函数 或者 三次贝塞尔曲线。
到目前为止, 看到的 ease、 linear、 ease- in、 ease- out 和 ease- in- out 等曲线函数非常一般, 用于过渡动画中也不是十分精确。而现在制作一些动画需求越来越精确,需要定义一些更精确的 函数。
CSS3 的transition 中, 定义三次贝塞尔曲线的语法如右所示: cubic-bezier( P0, P1, P2, P3)
一个三次贝塞尔曲线由四个点控制曲线形状。每个点由水平和垂直两个值来确定, 也就是常说的由X和Y值确定。
这些点的值是小数或者百分比, 不过很少看到使用百分比来设置一个三次贝塞尔曲线点。而且它们的值都是一个0 ~ 1 的小数。 不过有一点需要特别注意, 三次贝塞尔曲线中的P0 和 P 两个点是无法 设置的, 因为它们总是存在HTML中, 也就是说它们总会是( 0, 0)和( 1, 1)。
注意,三次贝塞尔曲线中的每个点值只允许 0 ~ 1 的值。
step() 函数 step()函数用于把整个操作领域划成同样大小的间隔, 每个间隔都是都是相等的。 该函数还指定发生在开始或结束的时间间隔是否另外输出百分比( 换句话说, 如果输出的百分比为 0% 表示输入变化的初始点)。
step() 函数非常独特, 它允许在固定的间隔播放动画。 例如, 在 step() 函数图上可以看出, 动画属性比在 0% 处开始,涨到50%, 动画结束时, 属性值达到100%( 也就是结束状态属性)。 并且 在各个 step() 函数中 每个步骤在过渡动画中不够平滑
step(< integer>[,[ start| end]]?) step() 函数主要包括两个参数。
·第一个参数是一 个数值< integer>, 主要用来指定step()函数间隔的数量, 此值必须是一个大于0的正整数。
·第二个参数是可选的, 是start或end, 如果第二个参数忽略, 则默认为end值。 其中step( 1, start)相当于step- start; step( 1, end)相当于step- end。
伪元素触发
使用 transition 时, 常用鼠标悬浮(: hover) 来触发过渡。
为说明这与触发过渡的实际事件毫无关联, 也为强调状态变化的重要性, 下面提供了 一些触发过渡的其他方法。
39. 使用: active “:active”伪类表示用户单击某个元素并按住鼠标按钮时显示的状态。
40. 使用: focus“:focus”伪类通常会在元素接收键盘焦点时出现。文本输入框元素上将发生过渡, 且该元素得到焦点时会执行文本输入框元素宽度和背景色过渡。
此处作为一个边点, 当对“: hover”伪类应用过渡时, 最好将“: focus”添加到选择器堆栈。 这样将能够丰富鼠标用户和键盘用户的体验。
41. 使用: checked “:checked”伪类在发生以下状况时触发过渡。 文本框选中时,
42. 媒体查询触发 触发元素状态变化的另一种方法是使用CSS3媒体查询( Media Queries)。
43. JavaScript 触发 如果可以基于CSS的状态更改触发过渡, 自然可以通过 JavaScript做到这一点。
隐式过渡 “隐式过渡”指的是 当 一个属性改变时引起另一个属性到一个属性的过渡。
。。。。。。
十四,CSS3 动画
虽然transition在一定的时间内可以实现元素的初始状态在指定的时间范围过渡最终状态, 模拟一种过渡动画效果, 但它的功能是非常有限的。 因此, CSS3 新增了 一个动画属性 animation。 与过渡 属性 transition 属性不同的是, CSS3 的 animation 属性可以像Flash制作动画一样, 通过关键帧控制动画的每一步, 实现更为复杂的动画效果。
CSS3中通过animation实现动画和transition实现动画非常类似, 都是通过改变元素的属性值来实现动画效果的。
它们的区别主要在于: 使用 transition属性只能通过指定属性的初始状态和结束状态, 然后在两个状态之间进行平滑过渡的方式来实现动画。
而animation实现动画效果主要由两个部分组成:
1) 通过类似Flash动画中的关键帧来声明一个动画;
2) 在animation属性中调用关键帧声明的动画,从而实现一个更为复杂的动画效果。
CSS3 动画属性animation和CSS3的transition属性一样是一个复合属性,它包含了8个属性:
animation-name、主要用来指定一个关键帧动画的名字, 这个动画名必须对应一个@keyframes规则。 CSS加载时会应用animation-name指定的动画, 从而执行动画。
animation-duration、主要用来设置动画播放所需时间, 一般以秒为单位。
animation-timing- function、 主要用来设置动画的播放方式, 与transition-timing-function类似。
animation-delay、 主要用来指定动画开始时间, 一般以秒为单位。
animation-iteration- count、 主要用来指定动画播放的循环次数。
animation-direction、 主要用来指定动画的播放方向。
animation-play- state,主要用来控制动画的播放状态。
animation-fill- mode,主要用来设置动画的时间外属性。
:关键帧
在CSS3中, 把@keyframes称为关键帧,
@keyframes 的作用
transition制作一个简单的动画效果时, 包括了元素的初始属性和最终属性, 一个开始执行动作时间和一个延迟动作时间以及一个动作变换速率, 其实这些值都是一个中间值, 如果要控制得更细一些, 比如说 要第一个时间段执行什么动作, 第二个时间段执行什么动作( 换到Flash制作动画中来说,就是第一帧要执行什么动作,第二帧执行什么动作), 这样用 transition 就很难实现了, 此时也需要一个“ 关键 帧”来控制。 在CSS3中就是通过@keyframes属性来实现这样的效果的。
@keyframes的语法
@keyframes具有其自己的语法规则, 命名是由@keyframes开头, 后面紧跟着是“ 动画的名称” 加上一对花括号“{…}”,括号中就不同时间段样式规则,有点像CSS的样式写法。一个@ keyframes 中的样式规则是由多个百分比构成的, 如 0% ~100%, 可以在这个规则中创建更多个百分比, 分别给每个百分比中需要有动画效果的元素加上不同的属性, 从而让元素达到一种不断变化的效果, 比如说移动,再比如改变元素颜色、位置、大小和形状等。 不过有一点需要注意, 可以使用“ frome”“ to”代表一个动画是从哪开始,到哪结束,也就是说 from就相当于0%,而to相当于 100%。 值得说的是, 0%不能像别的属性取值 一样把百分比符号省略, 在这里必须加上百分符号(%)。如果没有加上,这个@keyframes是无效的,不起任何作用。 因为@keyframes的单位只接受百分 比值。@keyframes可以指定任何顺序排列来决定animation动画变化的关键位置
CSS中为元素应用动画
要在CSS中为元素应用动画, 首先要创建一个已命名的动画,然后将它附加到该元素属性声明块中的一个元素上。 动画本身并不执行任何操作; 为了向元素应用动画,需要将动画与元素关联起来。 这个要创建的动画, 必须使用@keyframes来声明( 或者对于当前的Webkit实现, 使用@-webkit-keyframes), 后跟所选择的名称, 该名称主要用于对动画的声明作用, 然后指定关键帧。
:CSS3动画8个子属性详解
44. animation-name 调用动画
animation-name属性主要是用来调用动画,其调用的动画是通过@keyframes关键帧定义好的动画。 该属性的使用语法如右所示: animation-name: none | IDENT[, none| DENT];
animation-name 是用来定义一个动画的名称, 其主要有两个值。
·IDENT:是由@keyframes创建的动画名称, 换句话说 此处的 IDENT需要和@keyframes中的IDENT 一致, 如果不一致将不能实现任何动画效果。
·none:为默认值, 当值为none 时, 将没有任何动画效果, 其可以用于覆盖任何动画。
45. animation-duration 设置动画播放时间
animation-duration主要用来设置CSS3动画播放时间, 其基本语法如右所示: animation- duration: < time>[,< time>]
animation-duration和transition-duration使用方法类似,是用来指定元素播放动画所持续的时间,也就是完成从0% ~100% 一次动画所需时间, 取值< time> 为数值, 单位为秒, 其默认值为 0, 这意味着动画周期为0, 也就是没有动画效果。 如果值为负值会被视为0。
46. animation-timing-function 设置动画播放方式
animation-timing-function属性主要是用来设置动画播放方式, 其基本语法如右所示: animation- timing- function: ease | linear | ease- in | ease- out | ease- in- out
animation-timing-function是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。 他和transition中的transition-timing-function一样, 具有以下几种变换方式: ease、ease- in、ease-in-out、 ease-out、 linear和cubic-bezier。
47. animation-delay 设置动画开始播放的时间
animation-delay属性用来定义动画开始播放的时间、 是延迟还是提前等。 该属性的基本语法右所示: animation- delay:< time>[,< time>]* 换句话说, animation- delay 属性用于定义在浏览开始 执行动画之前等待的时间。
48. animation-iteration-count 设置动画播放次数
animation-iteration-count 属性主要用来定义动画的播放次数。 其基本语法如右所示: animation-iteration-count: infinite | < number> [, infinite | < number>]* 此属性主要用于定义动画播放 多少次, 其值通常为整数, 但也可以使用带有小数的数字。 其默认值 1, 这意味着动画将从开始到结束只播放一次。 如果取值为infinite, 动画将会无限次地播放。
49. animation-direction 设置动画播放方向
animation-direction属性主要用来设置动画播放方向, 其基本语法如右所示: animation- direction: normal | alternate [, normal | alternate]* animation- direction 是用来指定元素动画播放的 方向, 其主要有两个值, 默认值为 normal, 如果设置为normal时, 动画的每次循环都是向前播放; 另一个值是alternate,它的作用是,动画播放为偶数次则向前播放,为奇数次则向反方向播放。 例如一个弹跳动画中, 可以为落下的球提供关键帧, 然后将animation-direction取值为alternate来控制播放动画的每秒中反转它。
50. animation-play-state 设置动画的播放状态
animation-play-state属性主要用来控制元素动画的播放状态, 其基本语法如右所示: animation-play-state: running | paused [, running | paused]* 主要有两个值: running 和 paused。 其中 running为默认值, 主要作用类似于音乐播放器, 可以通过paused将正在播放的动画停下来, 也可以通过running将暂停的动画重新播放, 这里的重新播放不一定是从元素动画的开始播放, 也可能是 从暂停的那个位置开始播放。 另外如果暂停了动画的播放, 元素的样式将回到最原始设置状态。
51. 设置动画时间外属性 animation-fill-mode
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作,其基本语法如右所示: animation-fill-mode: none | forwards | backwards | both 主要有四个值: none、forwards、 backwards和both。其默认值为none,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处。当其取值为forwards时,动画在结束后继续应用最后关键帧的位置。 当 其取值为 backwards 时,会在向元素应用动画样式时迅速应用动画的初始帧。当其取值为both时,元素动画同时具有forwards和backwards效果。在默认情况之下,动画不会影响它的关键帧之外的 属性, 但使用animation-fill-mode属性, 可以修改动画的默认行为。简单地理解 就是告诉动画在第一个关键帧上等待动画开始, 或者在动画结束时停在最后一个关键帧上而不回到动画第一帧 上, 或者同时具有这两个效果。
。。。。。。
十五,媒体特性与Responsive设计
随着科学技术不断地向前发展,网页的浏览终端越来越多样化,用户可以通过宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问网站。尽管无法保证一个网站在不同屏幕尺寸和不同设备上 看起来一模一样, 但至少要让你的Web页面能适配用户的终端, 让它更好地呈现在用户面前。 使用CSS3中的MediaQuery模块来让一个页面适应不同的终端( 或屏幕尺寸), 从而让页面有一个更好 的用户体验。
媒体类型媒体类型( Media Type) 在CSS2中是一个常见的属性, 也是一个非常有用的属性, 可以通过媒体类型对不同的设备指定不同的样式。
媒体类型引用方法在实际中媒体类型有近十种之多, 实际常用的也就那么几种。 不过媒体类型的引用方法也有多种, 常见的媒体类型引用方法主要有:
link标签、
xml方式、
@import
CSS3新增的@media
52. link方法
link方法引入媒体类型其实就是在< link>标签引用样式的时候, 通过link标签中的media属性来指定不同的媒体类型。 这种方式引入媒体类型时常跟着引用的样式文件走, 如下所示:
< link rel=“stylesheet” type=" text/css" href=“style.css” media=“screen” /> < link rel=" stylesheet" type=" text/css" href=" print.css" media=" print" />
53. xml方式
xml方式引用媒体类型和link引入媒体类型极其相似, 也是通过media属性来指定。