移动Web---字体图标，平面转换，渐变

字体图标

下载字体图标（https://www.icnfont.cn/）

image.png

步骤：百度搜索iconfont--素材库或者搜索栏去搜索你想添加的字体图标--点击你想要添加的某个字体图标的购物车--点击右上角的购物车--选择添加至项目（没有项目的要新建项目）--下载至本地，解压出来，解压的文件放在需要使用的文件夹的根目录

image.png

使用方法

1.unicode编码使用
步骤：
1.引入下载好的字体图标文件夹的iconfont.css;
2.利用空标签（大部分是利用i标签）去承接unicode编码内容；
3.声明字体图标库 font-family:iconfont

image.png

2.font-class类名调用
步骤：
1.引入下载好的字体图标文件夹的iconfont.css
2.类名：
第一个类名是固定的：iconfont;
第二个类名：通过demo_index.html文件或者项目主页面，直接复制文字下的类名即可

image.png

image.png

3.在线引入字体图标
步骤：
1.登录阿里巴巴矢量图标库，打开我的项目，选择Font class，点击生成在线代码。

image.png

平面转换

transfrom属性可以实现元素的位移、旋转、缩放等效果

translate语法

    transform: translate(水平移动距离, 垂直移动距离)
    transform:translateX 单独的设置水平方向位移
    transform：translateY 单独的设置垂直方向位移
    transform：translate translate(100px,50px) |参数代表水平方向位移距离和垂直方向位移距离（X轴正向为右，Y轴正向为下），若为负数则代表反方向。
    transform取值有px和百分比方式。百分比 取值：参考盒子自身大小。

转换注意点：

      1.tf属性对于行内元素是无效的；
      2.添加了tf的属性的盒子可以提高盒子层级，保留原来的位置---类似于相对定位的特点。

绝对定位居中：
     实现方法一：

image.png

image.png

缺点:自身尺寸改变时，不能实现居中效果。

    实现方法二：

image.png

image.png

通过将位移取值改为百分比数值，盒子自身尺寸改变时自动改变移动距离。

双开门案例：

rotate语法

     transform:rotate(角度)
注意：角度的单位时deg，取值正负皆可，取值为正, 则顺时针旋转；取值为负, 则逆时针旋转。

旋转案例：

transform-origin属性

transform-origin属性可以改变转换原点

    transform-origin语法：
    transform-origin:圆点水平位置 圆点垂直位置
    取值：方位名词（left、top、right、bottom、center）,
    像素单位数值，
    百分比（参照盒子自身尺寸计算）
    注意：默认圆点是盒子中心点，取值不用括号括起来。

转换圆点案例：

transform复合属性的使用

    transform复合属性可实现多形态转换

    transform:translate() rotate();

多重转换原理
    Ø 旋转会改变网页元素的坐标轴向
    Ø 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

多重转换案例：

scale语法

    使用scale属性可以改变元素尺寸
    transform: scale(x轴缩放倍数, y轴缩放倍数);

    Ø 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
    Ø transform: scale(缩放倍数);
    Ø scale值大于1表示放大, scale值小于1表示缩小

缩放案例：

渐变

background-image属性

使用background-image属性可以实现渐变背景效果
background-image语法：
    background-image:linear-gradient(颜色1，颜色2);

image.png

image.png

今天比昨天好，这就是希望！