移动web

字体图标

字体图标使用阿里巴巴矢量图标库

本地引入

挑选图标加入购物车
添加至项目
去到项目中，点击下载代码
解压压缩包，更改文件夹的名字为iconfont
放到项目文件夹中

利用font class的方式去引入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标基本使用-类名</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .iconfont {
            color: lightpink;
            font-size: 500px;
        }
    </style>

</head>

<body>
    <!-- 
        2.1 设置字体图标公共类名iconfont 
        2.2 打开demo_index.html
            点击Font Class选项卡
            复制图标的类名 添加到标签的class上
    -->

    <span class="iconfont icon-hanbao3"></span>
</body>


</html>

在线引入
- 挑选图标加入购物车
- 添加进项目
- 复制在线的链接
- link标签引入在线链接
- 先设置公共的类名即可iconfont
- 再粘贴图标的类名即可
- ```
<i class="iconfont icon-gougou1"></i>
```

变换转换

使用transform进行转换

平移
- ```
transform：translate(水平,垂直)
```
- 百分比参考自身计算
- 应用：配合定位实现元素水平垂直居中
旋转
- transform：roate(30deg)
- 正值顺时针，负值逆时针
缩放
- transform：scale（水平倍数，垂直倍数）
- 倍数0-1缩小，大于1放大
- scale（2）放大2倍
斜切
- transform：skewX(30deg)
- transform： skewY(30deg)
- 应用檫亮效果

注意

行内元素设置转换无效
如果多个转换写到一个transform里面，要用空格分开


    .box:hover img {
          /* 边向右走600px 边旋转一周 */
          /* transform: translate(600px) rotate(360deg); */
          transform: translate(300px) rotate(100000000deg);
          /* 如果先写旋转会改变坐标的方向 */
          /* transform: rotate(360deg) translate(600px); */
      }

如果同时有旋转和平移属性，最好先平移，避免先旋转影响坐标系的方位

更改转换原点
- transform-origin: 水平垂直；
- 使用上下左右的方位坐标，例如：left，bottom

背景渐变

        .box {
            width: 300px;
            height: 200px;
            border: 2px solid orange;
            /* 
            1. 背景渐变的本质是背景图片
            2. background-image: linear-gradient(
                方向,
                颜色,
                颜色
                )
                方向： 默认 从上到下
                1. 方位名词
                to right 从左到右
                to right top  从左下到右上
                
                2. 角度 0deg 从下到上
                */

            /* 设置背景渐变 水平向右 从#6cf 渐变至 #ff0 */
            /* background-image: linear-gradient(to right, #6cf, #ff0, tomato, #0a0); */
            background-image: linear-gradient(28deg, #6cf, #000, #fff, #ff0, red);

        }

方位
- to right: 从左到右
- 45deg：从左下到右上，参考时钟

移动web基础

移动web

字体图标

变换转换

背景渐变