字体图标
iconfont阿里巴巴矢量图
-
本地引入
- 挑选图标加入购物车
- 添加至项目
- 去到项目中，点击下载代码
- 解压压缩包，更改文件夹的名字为iconfont
- 放在项目文件夹中
- 利用font class方式去引入
-
在线引入
- 挑选图标加入购物车
- 添加至项目
- 复制在线的链接
- link标签引入在线链接
- 先设置公共的类名iconfont
- 再粘贴图标的类名即可
2d变换、转换transform
平面坐标系
- 从左到右是正值
- 从上到下是正值
- 反方向是负值
平移
- transform:translate(水平，垂直)
- 百分比参考自身计算
- 应用：配合定位实现元素水平垂直居中
旋转
- transform:rotate(30deg)
- 正值顺时针，负值逆时针
缩放
- transform:scale(水平倍数，垂直倍数)
- 倍数：0-1缩小，大于1放大
- transform:scale(2) 代表水平垂直放大2倍
注意
- 1、行内元素设置转换是无效的
- 2、有多个转换要写到同一个transform里面，并且用空格分隔 transform:translate(100px) rotate(10deg)
- 3、如果同时有旋转和平移属性，最好先写平移，避免先旋转影响坐标系的方位
更改转换原点
-
transform-origin:水平，垂直；
-
方位坐标
- left
- top
- center
- right
- bottom
-
具体像素
背景渐变
background-image:linear-gradient(方位，颜色，颜色)
方位
-
to right 从左到右
-
45deg
- 从左下到右上
- 参考时钟
XMind - Trial Version
