01-移动web第一天

主要学习内容：字体图标、平面转换、渐变

一、字体图标

通常是通用小图标，或是知名公司小图标 logo等

目标：使用字体图标技巧实现网页中简洁的图标效果

本质上是字体，通过某种方式，显示出图标
- 常用span i em标签包裹，i 和 em标签包裹时，一般会先去掉斜体
  - 标签里只放图标，不要夹杂
- 下载图标时的文件夹里：引入的样式表里 iconfont.css 是用伪元素自造新字体（默认微软雅黑） demo.css样式表里 @font-face {} 是造字图标过程 demo_index.html 小图标事例【打开选择自己想要的图标】
- 注意权重

与精灵图的比较

兼容性好矢量图，不失真可以改颜色 font的属性都可以用
iconfont 阿里巴巴矢量图库

国外：icomoon

iconfont 阿里巴巴矢量图库  选择方式
- 3种选择方式

    - 1、下载素材---UI设计师
    - 2、下载代码---本地引入【需要下载到本地电脑，解压，若更新新的图标时，不方便】

        - 书写方式

            - 第1种：Unicode编码    不推荐
            - 第2种：引入字体图标样式表  Font class   推荐
            使用步骤如下：
①下载自己想要的图标文件夹，放到html同级目录里
②复制  <link rel="stylesheet" href="./iconfont.css">    注意更改路径

           -第3种：Symbol 引用  【多色图标，兼容性差】
步骤：①在body里，引入  <script src="./iconfont/iconfont.js"></script>  注意更改路径
    ②在head里，直接复制粘贴
    ③在body里，更改想要的图标名 
    
      - 3、添加至项目---推荐【链接方式，方便在线更新新的图标,只需替换原来的链接路径】

        - 书写方式

            - ① Font class
            - ②link 引入链接  注意路径  https:

留意：

①为避免不停追加图标，拿到项目后，从头到尾看一遍，争取一次性引入。 ②开发过程中，一般用在线链接，当整个流程已写完，测试过程中，可以转为本地 ③当阿里图库没有自己想要的图标时，ui设计师自己上传，svg文件

二、平面转换 transform

    2D\2维效果

行内元素添加transform属性没有任何效果，只有行内块与块级可行

一定要注意层叠性（连写）

位移

transform:translate(x轴移动距离，y轴移动距离）从左到右，从上到下正向右移正向下移负向左移负向上移只给出一个值只表示x轴移动距离
①参考原来的位置移动，当下面有盒子时，往下移会盖住下面的盒子 ②不脱离标准流，还占着原来的位置，不会影响其它元素的结构布局
单位：①px ②百分比，参照自己的宽高度百分比移动距离

故与水平垂直搭配定位：子绝父相 top:50%; lelt:50%; 参照父级元素的宽度移动距离 margin-top:-自身宽度的一半px;margin-left:-自身高度的一半px; 参照自身元素的宽度移动距离【需要提前知道本身的宽高度】【margin-top:-50%;margin-left:-50%; 也是参照父级元素的宽度移动距离】外边距：兼容性好

当不知道父级元素和自身元素的宽高时，采用步骤如下： ①子绝父相 ②top:50%; lelt:50%; ② transform:translate(-50%，-50%）

旋转

transform:rotate(角度）---用deg代表单位度正顺负逆
默认是盒子的中心位置旋转 center center

可以用 transform-origin:原点水平位置原点垂直位置方式：①方位名词（left、top、right、bottom、center）如果只写一个值，另一个值默认为center ②像素单位数值 px ③百分比（参照盒子自身尺寸计算）

- transform-origin属性改变转换原点   而不是旋转原点

常与hover搭配， transform: rotate(); 一般写在hover里 transform-origin: left top; 改变转换原点一般写在原元素里
①注意添加旋转的时候会更改坐标轴线的方向有0deg：初始位置 ②如果同时有旋转和位移的话，建议先写位移属性 ③注意连写顺序 transform: translate(600px) rotate(360deg)

缩放

transform: scale(x轴缩放倍数, y轴缩放倍数)

0~1 缩小

1 放大聚焦的效果负数缩小倒放没有单位一个数时，同时代表x与y轴

默认围绕着盒子中心位置进行缩放 center center 可以用 transform-origin:原点水平位置原点垂直位置

三、渐变

1. 背景渐变的本质是背景图片【从一个颜色慢慢渐变成另一个颜色】

2.background-image: linear-gradient(方向, 颜色, 颜色 ) gradient 梯度 3.渐变方向：默认：从上到下 ①方位名词： to right 从左到右 to left 从右到左 to left top 从右下到左上 ②角度 0deg 从下到上

四、拓展

1、斜切常用于擦亮效果

transform: skewX(30deg); 或 transform: skewY(30deg);

一般情况下：transform: skew(30deg); 默认为x轴正 \ \ 父 / /

2、擦亮

3、属性选择器 [ ]

权重 10 常用于字体图标应用，去掉公共类名

不看标签，只看属性名

五、解题思路

①平面转变连写顺序（层叠性）

②属性书写位置 ③过渡 ④透明度 ⑤悬停时的选择器结构书写

静态呈现：

1、先分析静态页面【是否可以点击】 2、图片是否经常更换 3、文字所在容器是否压住定位层级z-index 4、遮罩层是否背景渐变

悬停效果：点击哪个盒子{一般是大盒子} ①图片是否缩放 ②文字盒子平移 ③遮罩层初始透明0 悬停1 淡入淡出效果

01-移动web第01天 字体图标、平面、渐变