字体图标
下载方法
1.图标库下载地址:https://www.iconfont.cn/
2.选择图标库 2. 选择图标3.加入购物车 4.添加至项目下载至本地
使用方法
1.Unicode编码
1.引入样式表:iconfont.css
- 复制粘贴图标对应的Unicode编码:<i></i>
3.设置文字字体,字体家族font-family: iconfont
2.使用字体图标 – 类名
1.引入样式表:iconfont.css
2.调用图标对应的类名,必须调用2个类名
iconfont类:基本样式,包含字体的使用等
icon-xxx:图标对应的类名 :<i class="iconfont icon-zhaoxiangji xj"></i>
3.在线引入字体图标
1.在线引入字体图标,要在链接前面添加 http:
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3294705_7kyv146p6m2.css">
2.调用图标对应的类名,必须调用2个类名
iconfont类:基本样式,包含字体的使用等
icon-xxx:图标对应的类名 :<i class="iconfont icon-zhaoxiangji xj"></i>
平面转换
位移
transform: translate(水平移动距离, 垂直移动距离);{X轴正向为右,Y轴正向为下}
位移-绝对定位居中
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
旋转
transform: rotate(90deg);{取值为正, 则顺时针旋转
, 取值为负, 则逆时针旋转}
转换原点
transform-origin: 原点水平位置 原点垂直位置;{ left、top、right、bottom、center}
transform复合属性
注意点:旋转会改变坐标轴方向
当平移与旋转一起使用的时候,要把平移放在旋转的前面
transform: translateX(600px) rotate(360deg);
缩放
transform: scale(缩放倍数)=(x轴缩放倍数, y轴缩放倍数),{正常为1,大于1等比例放大,小于1等比例缩小
透明度(opacity)值为{0-1}
渐变
方位:默认的方位从上到下
1.方位名词:例如:从左到右渐变 to right,从左上到右下渐变 to right bottom
2.角度deg:直接写deg度数即可,不用再加to
background-image: linear-gradient(to right, transparent(透明), #e43232, #91ca1f);