移动web第一天 字体图标

1.字体图标

下载和使用

字体图标本质还是文字 通过文字的属性来改变字体图标的属性 font-size改变字体图标的大小 color改变图标的颜色

重要的是第一个demo_index.html文件说明书文件 引入的时候记得把字体的名字改了

第一个文件是说明书

iconfont.css是引入文件，下面三个文件是间接引入的

.js是交互的一个文件 .json是配置文件

最后三个文件是字体的核心文件

结构和样式简单的小图标，用字体图标 结构和样式复杂的用精灵图

2.2D转换

​ 二维坐标 移动盒子的位置：定位 盒子的外边距 2d转换移动

（1）移动：translate 类似于定位 取值：像素值，百分比

​ transform：translate（x）；相对于X轴进行移动

​ transform：translate（y）；相对于y轴进行移动

​ transform：translate（x,y）；

​ transform：translateX（50%）； 可以用百分比表示，移动的距离是相对于自身来说的

​ 子绝父相对于父元素进行移动 width也是相对于父元素

​ 垂直居中：left：50%；

​ top：50%；

​ transform：translate(-50%，-50%)；属性名相同，百分之百会覆盖

（2）旋转：rotate 度数用deg表示 ，可以是正值，也可以是负值

​ transform：rotate（度数）； 例如：transform：rotate（45deg）；

​ 设置元素转换的中心点：transform-origin：x y；

​ x和y的取值可以是方位写 默认的是50%，就是center center

​ 可以是像素值 来设置旋转中心点

（3）缩放：scale 取值：关键词、像素、百分比 纯数字，不能是负数

​ transform：scale（x(宽度)，y(高度)）； 里面的数值是数字，表示的是倍数的意思 1就是1倍 2就是2倍

​ 设置缩放及基准点：transform-origin：x y；

（4）倾斜：skew

​ transform：skew（度数，度数）；

3.2D综合写法

​ transform：translate（） rotate（） scale（）...；

要是先旋转会改变坐标轴的方向

4.渐变

​ background-image: linear-gradient（渐变方向，颜色，颜色）；

​ 三种隐藏方式，在页面山看不见：display：none；不占位置

​ visibility：hidden；占位置

​ opacity：0；完全透明，占位置