字体图标
创建自己的iconfont字体图标库,通过Unicode,Font-class,在线引入三种方法实现字体图标在html中的使用
字体图标从无到使用的步骤
1,进入iconfont官网https://www.iconfont.cn/home/index,完成注册
2,在素材库中寻找自己这个项目所需要的所有字体图标,然后加入库
3,将选择好的库全部打包进自己的项目(命名看个人)中
4,通过Unicode,Font-class,在线引入三种方法完成字体图标在页面中的正确显示
字体图标的三种引入方法介绍
一,Unicode方法:
1,引入iconfont文件夹中的iconfont.css文件
<link rel="stylesheet" href="./iconfont/iconfont.css">
2,通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来
3,在style-css样式中声明字体图标库
二,Font-class方法:
1,引入iconfont文件夹中的iconfont.css文件
<link rel="stylesheet" href="./iconfont/iconfont.css">
2,通过标签承接字体图标
<i class="iconfont icon-dizhi icon1"></i>
iconfont:固定类名
icon-dizhi:通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名可得到
icon1:在css样式中修改属性选择的类名,前面两个类名选择无效,命名按个人喜好
三,在线引入:
1,在iconfont主页进入到自己的iconfont项目中,找到查看项目链接
2,复制.css后缀的链接
3,在线引入字体图标，要在链接前面添加 http:
例如:<link rel="stylesheet" href="http://at.alicdn.com/t/font_3294701_ef2q183k6ug.css">
平面转换
平面转换的内容:位移,旋转,转换原点,缩放
位移效果
属性名 transform: translate
使用:
1,像素单位取值
transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px);
2,百分比 取值：参考盒子自身大小
transform: translateX(50%);
transform: translateY(50%);
transform: translate(50%);
注:transform属性对行内元素无效的;
添加了transform属性的盒子可以提高盒子层级,保留原来的位置--类似于相对定位
旋转效果
属性名 transform: rotate
使用:
transform: rotate(360deg);---顺时针旋转360度
transform: rotate(-360deg);---逆顺时针旋转360度
转换原点
属性名 transform-origin
使用:
1,取值方位名词
transform-origin: right bottom;
2,具体的像素单位（正负均可)
transform-origin: 200px 200px;
3.百分比(参照于盒子自身尺寸)
transform-origin: 50% 50%
缩放
属性名 transform: scale
使用:
1,缩放: scale() 大于1表示放大
transform: scale(1.2);
2,小于1表示缩小
transform: scale(.5);
渐变
渐变:背景颜色渐变
属性名:background-image: linear-gradient
使用:
1,方位名词,例如：从左到右渐变 to right,从左上到右下渐变 to right bottom.
background-image: linear-gradient(to right, red,black);
2,角度deg：直接写度数即可，不用再加to
background-image: linear-gradient(45deg,red,black);
