字体、平面变换、渐变

1.字体图标

1.优点

1.体积小

2.方便使用

①修改颜色

②修改尺寸

3.兼容性好

2.用法

①unicode

②font-class

3.免费的字体图标网站

①iconfont

4引入css

①引入它的css样式

②根据文档填写合适的class 例如：iconfont icon-cart

5.了解

①使用svg来生成字体图标

②字体图标实现原理

2.平面变换

1.三大形态：(位移、旋转、缩放)

1.位移（translate)

1.平面转换位移

transform：translate(0px,0px)

2.快捷键代码

trf:t

3.使用百分百单位相对于自身的尺寸

transform：translate(100%,100%)

注意：

1.transform(水平移动距离)

2.translate(垂直移动距离)

3.x轴正向为右，Y轴正向为下

4.取值：

①像素单位数值

②百分比（参照物为盒子自身尺寸）

2.旋转(rotate）

1.旋转

①rotate：实现元素旋转效果

②语法：transform;rotate(角度)

角度单位是：deg

③用法：

1.取值为正，则顺时针旋转

2.取值为负，则逆时针旋转

2.转换原点

使用（transform-oridin)改变，转换原点

①默认原点是盒子中心点

②transform-oridin：原点水平位置，原点垂直位置

取值：

①方位名词(left、right、bottom、center)

②像素单位数值(px)

③百分比（参照物为盒子自身尺寸）

3.多重转换

写法：

transform:translatex(..px) rotate(..deg)

当位移和旋转共同出现的时候

1.先位移后旋转

2.先旋转后位移

3.以上的效果不一样

原因：

1.先旋转的时候，物体在旋转的时候，坐标系也跟着旋转！！

2.所以，（先位移，在旋转）

3.缩放(scale)

属性：transform;scale(缩放倍数)

注意：

一般情况下，只为scale设置一个轴，表示x轴和y轴等比例缩放

3.渐变

1.只能给背景图片添加(background-image)

2.分层的渐变效果

盒子上下划分高度 100%

0% —30%—black

30%—50% black—red

50%—80% red—>blue

80%—100% blue

3.渐变的方向

1.默认值 (to bottom ) 从上到下

2.上到下 (to top)

2.线性渐变(linear-gradient)

①linear-gradient(black,red)

②linear-gradient(black 10%,red 50%)

③linear-gradient(30deg,black 10%,red 50%)

移动web 字体、平面变换、渐变