iconfont的使用与2D转换的使用

高大上的某名字

2021-12-28 251 阅读2分钟

软件的使用

xmind

processon

百度脑图

enter

创建兄弟节点

tab

创建子节点

markdown文档

字体图标

iconfont 阿里巴巴矢量图标库

www.iconfont.cn/

一定要注册登录方便项目管理

本地引入

挑选图标加入购物车

添加至项目

去到项目中，点击下载代码

解压压缩包，更改文件夹的名字为iconfont

放到项目文件夹中

利用font class的方式去引入

在线引入

挑选图标加入购物车

添加至项目

复制在线的链接

link 标签引入在线链接

先设置公共的类名iconfont

再粘贴图标的类名即可

`[ <i class="iconfont icon-xxx"></i>]()`

`[ fontawesome]()`

`[ icomoon]()`

2d变换.转换 transform`

平面坐标系

从左到右是正值

从上到下是正值

反方向为负值

平移

`[ transform: translate(水平, 垂直);]()`

百分比参考自身计算

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

旋转

`[ transform: rotate(30deg)]()`

正值顺时针负值逆时针

缩放

`[ transform: scale(水平倍数, 垂直倍数)]()`

倍数：0 - 1缩小大于1 放大

`[ transform: scale(2)]()`

代表水平垂直放大2倍

斜切

`[ transform: skewX(30deg);]()`

`[ transform: skewY(30deg);]()`

应用：擦亮效果

注意

1. 行内元素设置转换无效的

2. 如果有多个转换要写到同一个transform里面并且用空格分隔

`[ transform: translate(100px) rotate(10deg)]()`

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

更改转换原点

`[ 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;]()`