CSS iconfont,svgicon,css3 transition,transform,animation,media

1.字体图标，svg图标

字体的原理：当浏览器读取饥人谷三个字时会转化为对应的unciode码（可认为是世界上任意一种文字的特定编号。根据font-family查找电脑里对应字体文件）对应的字体文件，在根据unicode码去查找其图形，之后在绘制到页面上。

展示的文字本质上是某个图形（字体）文件里某个unicode码对应的图形

2.字体图标的原理：

在页面上放入图标的unicode码（可以随意指定）

让该元素是使用自定义的字体

字体对应着我们自己创建的字体库文件

字体库文件里有关于该unicode码的外形描述

3.字体图标与svg图标对比

一样点，矢量，放大不失帧，体积小

不同点，字体图标只可单色和文字渐变（本质是文字），svg图标可以设置多色

4.CSS transtion

trainsion：让样式平滑变化

5.css3 transform，平移translate，totate旋转，倾斜skew，缩放scale

transform：transform偏移，scale放大缩小，rotate旋转，skew形变

6.scc3 animation 定义动画关键帧

使用动画

7.trainsion：效果展示

8.cubic-bezier，定义快慢

9.easing动效：缓动变化可以用在大小，位置，背景色，透明度的变化，可以让动效看起来更酷

10.css3 @media

让css在限定的条件下才生效

条件

视口最大（max-width）最小宽度（min-width）

媒体类型（print or screen）

横屏（landscape）pr 竖屏（portait）

mare

11.响应式布局