字体图标
下载字体图标(https://www.iconfont.cn/)
步骤;百度搜索iconfont--素材库或者搜索栏去搜索你想要添加的字体图标--点击你想要添加的某个字体图标的购物车--点击右上角的购物车--选择添加至项目(没有项目的要新建项目)--下载至本地,解压出来,解压的文件放在需要使用的文件夹的根目录
unicode编码的使用:
步骤:
1.引入下载好的字体图标文件夹的iconfont。css;
2.利用空标签(大部分使用i标签)去承接unicode编码内容;
3.声明字体图标库 font-family:icinfont
font-class类名调用:
步骤:
1.引入下载好的字体图标文件夹的iconfont.css;
2.类名:
第一个类名是固定的:iconfont;
第二个类名:通过demo-index,html文件夹或者项目主页面,直接复制文字下的代码
平面转换
位移基本使用
transform: translate(水平移动距离, 垂直移动距离);
取值:(正负均可)
像素单位数值 百分比
(参照物为盒子自身尺寸)
注意:X轴正向为右,Y轴正向为下
技巧:
translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离:translateX() & translateY()
位移绝对定位居中
位移取值为百分比数值,参照盒子自身尺寸计算移动距离
旋转
语法
transform: rotate(角度);
注意:角度单位是deg
技巧:取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转
转换原点
语法
默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;
l 取值
方位名词(left、top、right、bottom、center)
像素单位数值
百分比(参照盒子自身尺寸计算)
渐变
渐变背景
使用background-image属性实现渐变背景效果
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景