2015-06-02

c3教程笔记day3

过渡，动画

过渡

过渡是css3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡，经常用来制作动画效果
transition-property设置过渡属性
transition-duration设置过渡时间
transition-timing-function 设置过渡速度
transition-delay设置过渡延时

2D转换

移动translate(x,y)可以改变元素的位置，x，y可为负值

移动的位置相当于自身原来的位置
y轴正方向朝下
可以设置具体像素值，也可以设置百分比，相当于自身的宽度和高度的百分比。

缩放scale(x,y)可以对元素进行水平方向和垂直方向的缩放，x，y的值可以为小数。
旋转rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针。

倾斜skew(deg,deg)

可以使元素按一定的角度进行倾斜，可以为负值，第二个参数不写，默认为0.

注意：可以同时使用多个转换，但顺序会影响转换的效果。

3D转换

辅助属性：perspective
设置给父元素，作用于所有3d转换的子元素。
perserve-3d:保留3D空间

backface-visibility:设置元素背面是否可见。

动画

必要元素:
- 通过@keyframes指定动画序列；
- 通过百分比将动画序列分割成多个节点；
- 在各节点中分别定义各属性
- 通过animation将动画应用于相应元素；
关键属性
- animation-name设置动画序列名称
- nimation-duration动画持续时间
- animation-delay动画延时时间
- animation-timing-function动画执行速度，linear、ease等
- animation-play-state动画播放状态，running、paused等
- animation-direction动画逆播，alternate等
- animation-fill-mode动画执行完毕后状态，forwards、backwards等
- animation-iteration-count动画执行次数，inifinate等
- steps(60) 表示动画分成60步完成

伸缩布局

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

1、必要元素：
a、指定一个盒子为伸缩盒子 display: flex
b、设置属性来调整此盒的子元素的布局方式例如 flex-direction
c、明确主侧轴及方向
d、可互换主侧轴，也可改变方向
2、各属性详解
a、flex-direction调整主轴方向（默认为水平方向）
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈（由flex-wrap产生的独立行）对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
h、order控制子项目的排列顺序，正序方式排序，从小到大

字体格式

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
1、TureType(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

更多字体可以参考：
更多字体

字体图标

常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。
优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；
Font Awesome 使用介绍
http://fontawesome.dashgame.com/
定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/

万兆淼