字体图标
-
目标：使用字体图标简化网页中装饰性图标实现方式
-
字体图标介绍
-
iconfont图标库
-
特点
-
字体图标看起来是图，本质是字
-
加载速度快
-
兼容性高
-
灵活性高
-
通过字体属性控制样式
-
-
-
-
下载
-
登录后，选择目标图标，加入购物车
-
在购物车中添加至项目后， 在项目中下载
-
-
使用
-
Unicode编码
-
引入iconfont.css样式表
-
标签粘贴Unicode编码
-
标签调用类名iconfont
-
-
类名
-
引入iconfont.css样式表
-
标签调用类名
-
iconfont（font-family）
-
icon-xx（图标对应的类名）
-
-
-
-
使用步骤
-
引入字体图标样式表
-
调用图标对应的类名
-
-
svg上传
-
作用： 图标库中的图标无法满足项目需求
-
步骤
-
上传SVG图标
-
-
去除颜色提交
-
-
加购物车并下载使用
-
-
平面转换transform
-
目标：使用位移、缩放、旋转、渐变效果丰富网页呈现方式
平面转换：transform
-
平面
-
x和y 2条坐标轴组成的屏幕
-
x轴正值向右
-
y轴正值向下
-
-
转换
-
改变盒子形态
-
位置
-
角度
-
大小
-
-
-
属性： transform
位移translate
-
语法
-
transform: translate(水平移动距离, 垂直移动距离);
-
translate(x, y)
-
translateX()
-
translateY()
-
-
取值（正负均可）
-
像素单位数值
-
百分比（参照物为盒子自身尺寸）
-
-
注意
-
X轴正向为右，Y轴正向为下
-
定位盒子居中
-
定位
-
绝对定位
-
left：50%
-
top：50%
-
-
位移
-
translate(-50%, -50%)
-
-
案例
旋转rotate
-
rotate(角度)
-
语法
-
transform: rotate(角度);
-
单位：deg
-
-
旋转方向
-
正值：顺时针
-
负值：逆时针
-
转换中心点transform-origin
-
属性
-
transform-origin
-
-
语法
-
默认圆点是盒子中心点
-
transform-origin: 原点水平位置 原点垂直位置;
-
-
取值
-
方位名词-关键词
-
top
-
bottom
-
center
-
left
-
right
-
-
百分比
-
（参照盒子自身尺寸计算）
-
-
px
-
多重转换
-
定义
-
同时改变盒子的多个形态
-
-
语法
-
注意
-
旋转放在最后
-
旋转会改变坐标轴向
-
缩放scale
-
scale(倍数)
-
语法
-
transform: scale(缩放倍数);
-
-
值
-
大于1，表示放大
-
小于1，表示缩小
-
渐变background-image
-
目标：使用background-image属性添加渐变背景效果
-
语法
-
==transform: scale(缩放倍数);==此处有问题
-
基本写法
-
background-image： linear-gradient( 颜色1, 颜色2, ...... );
透明渐变
-
background-image: linear-gradient( transparent, rgba(0, 0, 0, .6) );
透明度
-
opacity
-