字体图标
iconfont 阿里巴巴矢量图标库
-
一定要注册登录方便项目管理
-
本地引入
- 挑选图标加入购物车
- 添加至项目
- 去到项目中，点击下载代码
- 解压压缩包，更改文件夹的名字为iconfont
- 放到项目文件夹中
- 利用font class的方式去引入
-
在线引入
- 挑选图标加入购物车
- 添加至项目
- 复制在线的链接
- link 标签引入在线链接
- 先设置公共的类名iconfont
- 再粘贴图标的类名即可
- <i class="iconfont icon-xxx"></i>
2d变换.转换 transform
平面坐标系
- 从左到右是正值 X
- 从上到下是正值 Y
- 反方向为负值
平移
- transform: translate(水平X, 垂直Y);
- 百分比参考自身计算
- 应用：配合定位实现元素水平垂直居中
旋转
- transform: rotate(30deg)
- 正值顺时针 负值 逆时针
缩放
-
transform: scale(水平倍数, 垂直倍数)
-
倍数：0 - 1缩小 大于1 放大
-
transform: scale(2)
- 代表水平垂直放大2倍
斜切
- transform: skewX(30deg);
- transform: skewY(30deg);
- 应用： 擦亮效果
注意
-
- 行内元素设置转换无效的
-
-
如果有多个转换要写到同一个transform里面 并且用空格分隔
- transform: translate(100px) rotate(10deg)
-
-
- 如果同时有旋转和平移属性，最好先写平移，避免先旋转影响坐标系的方位
更改转换原点
-
transform-origin: 水平 垂直;
-
可以写方位坐标
- left
- top
- center
- right
- bottom
-
也可以具体像素
背景渐变
-
background-image: linear-gradient(方位, 颜色, 颜色);
-
方位
-
to right
-
从左到右
-
-
45deg
- 从左下到右上
- 参考时钟
拓展
背景裁切
-
background-clip
-
border-box
-
padding-box
-
content-box
-
text
-
背景只显示在文字的区域
-
-webkit-background-clip: text
-
应用：可以配合背景渐变实现渐变色文字
-
color: transparent;
-
-
