iconfont阿里巴巴矢量图库
-
本地引入
- 先加入购物车
- 添加项目
- 下载代码
- 解压压缩包，更改文件夹的名字为iconfont
- 放入项目里，用link引入
- 使用 font class方式引用
-
在线引入
- 加入购物车
- 添加到项目
- 复制链接，用link引入，在链接前面加https:
- 设置公共类名 iconfont ,再复制图标的类名
平面转换
平面坐标系
- 从左到右是正值
- 从上到下是正值
平移
-
transform:translate(水平方向,垂直方向)
- 只有一个值的时候是水平方向
- 设置百分比是参考自身的宽高
- 值之间用逗号隔开
旋转
-
transform:rotate(角度)
- 正值是顺时针，负值是逆时针
-
旋转原点： transform-origin:水平 垂直
- 默认是元素的中心
- 可以设置方位名词改变原点的位置
- 具体的像素也可以改变原点的位置
缩放
-
transform:scale(水平倍数，垂直倍数)
- 比1大就是放大的倍数
- 比1小就是缩小的倍数
斜切
-
transform:skew(水平，垂直)
- 一个数值默认是水平方向
注意点
- 行内元素设置转换无效
- 设置多个转换时注意属性的层叠性 ，属性之间用空格隔开
- 有位移和旋转的时候，先写位移再写旋转
渐变
background-image: linear-gradient(方位，颜色，颜色);
- 渐变的属性是背景图片
- 默认的方向从上到下
- 多个颜色渐变要用逗号隔开
- 通过方位名词改变渐变的方向
- 角度值也可以改变
属性选择器
符号 ： [ ]
- 例如：[type] 选中有type属性名的标签
- 例如 ： [type="password"] 选择有type属性名并且值为password的标签
模糊选择
-
[class^="属性值"]
- 选择以"属性值"开始的的类名
-
[calss$="属性值"]
- 选择以"属性值"结束的的类名
-
[class*="属性值"]
- 选择有"属性值"的类名
作者：森林皮皮龙
链接：juejin.cn/post/704704…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
