移动Web

一.字体图标 iconfont阿里巴巴矢量图标库

1.引入方式

①本地引入。挑选图标加入购物车。添加至项目，去到项目中，点击下载代码，解压压缩包，更改文件夹的名字为iconfont。放项目文件夹中，利用font class的方式去引入。

②在线引入。挑选图标加入购物车，添加至项目，赋值在线的链接，link 标签引入在线链接。先设置公共类名icontfont，在粘贴图标的类名即可<i class="iconfont icon-xxx"></i>

注意，一定要注册登录方便项目管理。在线引入时要加https:

二.2D变换，转换transform

1.平面坐标系

从左到右是正值，上到下是正值，反方向为负值

2.平移：transform:translate(水平，垂直)

百分比参卡片自身计算。

应用：配合定位实现元素水平垂直居中

3.旋转：transform:rotate(30deg)

正值顺时针，负值逆时针，单位是deg。（一定要写单位）

更改转换原点：transform-origin:水平垂直

可以是坐标方位: 上top, 右right ,下bottom ,左left

也可以是具体像素

4.缩放：transform:scale(水平倍数，垂直倍数)

0~1是缩小，大于1是放大

transform:scale(2)，代表水平垂直都放大2倍，不用加单位

5.斜切：transform:skew

transform:skewX(30deg)，transform:skewY(30deg)

注意：行内元素设置转换无效。

如果有多个转换要写到同一个transform里，要用空格分隔，transfrom:translate(100px) transfrom:rotate(90deg)

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

background-image:linear-gradient(方位，颜色，颜色)

方位，to right从左到右

45deg，从左下到右上，参考时钟

1.border-box

2.padding-box

3.content-box

4.text。背景只显示在文字的区域，

-weblit-background-clip:text

应用：可以配合背景渐变实现渐变文字，color:transparent