字体图标-iconfont
字体图标展示的是图标, 本质上是文字.
下载字体图标库网站:(https://www.iconfont.cn/)
下载字体包流程:
登陆账号→选择图标库→找到需要的图标→加入购物车→添加至项目→下载到本地
字体图标使用方法:
1. Unicode使用方法:
- 引入iconfont文件夹中的iconfont.css文件.
- 通过 " i " 标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来.
- 声明字体图标库 (font-family:iconfont)
2. Font-class使用方法:
- 引入iconfont.css文件
- 通过标签承接字体图标: 类名: 第一个类名是固定的: " iconfont "; 第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可.
平面转换
使用transform属性实现元素的位移、旋转、缩放等效果
位移
translate实现元素位移效果
使用语法: transform: translate (水平移动距离, 垂直移动距离).
取值: 像素值
像素取值x.png
像素取值y.png
像素取值xy.png
取值: 百分比
像素百分比取值x.png
像素百分比取值y.png
使用translate快速实现绝对定位的元素居中效果
水平垂直居中.png
旋转
rotate实现元素旋转效果
语法: transform: rotate(角度)
角度取值为正, 顺时针旋转
角度取值为父, 逆时针旋转
旋转示例.png
transform-origin属性改变转换原点
默认原点是盒子的中心点
取值:
- 方位名词(left、top、right、bottom、center)
- 像素单位数值(px)
- 百分比(参照盒子自身尺寸计算)
多重转换
transform复合属性实现多形态转换
多重转换例子.png
注意: 旋转会改变坐标轴方向, 当平移与旋转一起使用的时候, 要把平移放在旋转的前面
缩放
scale改变元素的尺寸
transform: scale(x轴缩放倍数, y轴缩放倍数)
scale值大于1表示放大, scale值小于1表示缩小
注意: 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放.
渐变
background-image属性实现渐变背景效果
示例:
渐变例子.png
效果:
渐变效果.png
