3.25
一、字体图标
使用字体图标技巧实现网页中简洁的图标效果
字体图标展示的是图标，本质是字体。
处理简单的、颜色单一的图片
字体图标的优点：
灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数兼容性：几乎兼容所有主流浏览器
使用方便：
下载字体包
使用字体图标
二、平面转换
使用transform属性实现元素的位移、旋转、缩放等效果
平面转换
➢ 改变盒子在平面内的形态（位移、旋转、缩放）
➢ 2D转换
平面转换属性
➢ transform
1、位移
使用translate实现元素位移效果
语法
➢ transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）
➢ 像素单位数值
➢ 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
技巧
➢ translate()如果只给出一个值, 表示x轴方向移动距离
➢ 单独设置某个方向的移动距离：translateX() & translateY()
连在一起写的时候用 ， 隔开两个数值
2、复习居中效果
用子绝父相把子盒子定位到父盒子里面
然后子盒子上和左 设置位移50% 用transform 属性translate（x，y）x、y各负百分之50
3、旋转
使用rotate实现元素旋转效果
语法
➢ transform: rotate(角度);
注意：角度单位是deg
技巧：取值正负均可
➢ 取值为正, 则顺时针旋转
➢ 取值为负, 则逆时针旋转
4、使用transform-origin属性改变转换原点
语法
➢ 默认圆点是盒子中心点
➢ transform-origin: 原点水平位置 原点垂直位置;
取值
➢方位名词（left、top、right、bottom、center）
➢ 像素单位数值
➢ 百分比（参照盒子自身尺寸计算）
多重转换
使用transform复合属性实现多形态转换
transform：translate（）空格 rotate（）；
用上述方式实现边走边转的效果。
备注：如果分开写后面的属性会覆盖前面的属性导致上一条属性不呈现显示效果。
translate必须写前面 不然rotate会改变x轴的方向导致改变移动时的方向虽然最终会到目标位置但是移动轨迹就不一样了 。
5、缩放
使用scale改变元素的尺寸
语法：transform:scale (x轴缩放倍数，y轴缩放倍数)
技巧：
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
三、渐变
使用background-image属性实现渐变背景效果 linear-gradient 颜色1，颜色2
可以用rgba来设置透明度问题
