移动web第一天

字体图标

优点

灵活随时修改颜色和尺寸（color font-size）
轻量级体积小浏览器渲染块
兼容性好

使用方便

用法

1.unicode编码编码

<!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>字体图标unicode</title>

    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        span {
            font-family: 'iconfont';
        }

        .text {
            font-size: 50px;
            color: orange;
        }

    </style>
</head>
<body>
    <span class="text">&#xe6a6;</span>
    <span>&#xe600;</span>
</body>
</html>

2.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>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .one {
            font-size: 100px;
            color: orange;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-yanjing2 one 
    "></span>
    <span class="iconfont icon-yanjing-"></span>
</body>
</html>

font-class实现原理

给对应的标签添加一个伪元素这个伪元素设置contant属性属性值等于unicode编码

使用svg上传生成字体图标

1.打开iconfont页面点击上传图标

（www.iconfont.cn/）

2.选择文件---去除颜色提交

3逐一加入购物车---点击购物车---添加至项目

4下载至本地 ---解压缩

平面转换

三大形态

位移（transform:translate）

取值像素百分比

快捷敲代码技巧trf:t 
赋值可以用像素单位  正数是上 左移动 负数是 下右移动 
也可以用百分比单位  百分比是移动盒子自身尺寸的百分比  正数百分比是上 左移动 负数百分比是 下右移动
transform: translate(200px,200px); 
transform: translate(100%, 100%);

旋转（transform:rotate）

取值deg（度数）

transform: rotate(360deg);

改变旋转原点在元素css中书写transform-origin 取值可以是像素可以是方向名词可以是百分比

/* 修改元素的旋转原点 */
/* transform-origin: 像素; */
/* transform-origin: 方位名词; */
/* transform-origin: 百分比; */
/* 左上角 */
/* transform-origin: 0 0; */
/* transform-origin: top left; */
/* transform-origin: 0% 0%; */
/*右下角  */
/* transform-origin: 300px 300px; */
/* transform-origin: right bottom; */
/* 相对自身尺寸的百分比 */

缩放{transform:scale}

取值数字
```
transform: scale(1.2);
```

拓展

移动web学习笔记 字体图标+平面转换