一、字体图标
优点：
1.灵活性：灵活地修改样式，例如：尺寸、颜色等
2.轻量级：体积小、渲染快、降低服务器请求次数
3.兼容性：几乎兼容所有主流浏览器
使用方式：
1:Unicode
<!-- 1.引入iconfont.css文件 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
/* 3.设置文字字体为iconfont */
span {
font-family: "iconfont";
}
/* 4.用类名改文字大小颜色 */
.c {
font-size: 100px;
color: pink;
}
</style>
</head>
<body>
<!-- 2.复制粘贴图标对应的Unicode编码 -->
<span class="c"></span>
<sspan></sspan>
2:font-class
<title>Document</title>
<!-- 1.引入iconfont.css文件 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.dianying {
font-size: 100px;
color: skyblue;
}
</style>
</head>
<body>
<!-- 2.行内元素，要加上两个类名 -->
<span class="iconfont icon-dianying dianying"></span>
方式3：在线
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3243645_8568gh9eemr.css">
<style>
.iconfont {
font-size: 100px;
color: blueviolet;
}
</style>
</head>
<body>
<span class="iconfont icon-Dyanjing"></span>
<span class="iconfont icon-caidan"></span>
<span class="iconfont icon-dianzan"></span>
</body>
如何使用svg上传生成对应的字体图标
二、平面转换
目标：使用transform属性实现元素的位移、旋转、缩放等效果
平面转换： 1.改变盒子在平面内的形态（位移、旋转、缩放） 2.2D 平面转换属性 ：transform transform：translate（水平移动距离，垂直移动距离）
定位+margin实现居中
.box {
width: 800px;
height: 800px;
background-color: pink;
position: relative;
}
.son {
width: 400px;
height: 400px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
/* margin自身宽高的一半 */
/* 当盒子宽高发生改变是，margin值需要重新计算 */
margin-left: -200px;
margin-top: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
定位+位移实现居中
<title>Document</title>
<style>
.box {
width: 800px;
height: 800px;
background-color: pink;
position: relative;
}
.son {
width: 400px;
height: 400px;
background-color: skyblue;
position: absolute;
left: 50%;
top: 50%;
/* 以前：设置margin值 移动 自身的款的和高度的一半 */
/* 现在：位移 translate 取百分比值 相对于自身的宽度和高度 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
三、平面旋转
语法：transform: rotate(角度); 注意：角度单位是deg 取值为正, 则顺时针旋转 取值为负, 则逆时针旋转
转换原点（平移、旋转、缩放都可以转换）
/* 修改元素的旋转的中心点 */
/* transform-origin: 方位名词; */
/* transform-origin: 像素; */
/* transform-origin: 百分比; */
/* 左上角 */
/* transform-origin: top left; */
/* transform-origin: 0px 0px; */
/* 右下角 */
/* transform-origin: right; */
/* 看图片大小得出 */
/* transform-origin: 650px 650px; */
/* 相对于自身的尺寸 */
transform-origin: 100% 100%;
多重转换（先写移动再写旋转）
.box{
width: 800px;
/* 高度内容撑开 */
margin: 200px auto;
border: 1px solid #000;
}
img {
width: 200px;
transition: 2s;
}
/* 先写移动再写旋转 */
.box:hover img {
transform: translate(600px) rotate(720deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tyre.png" alt="">
</div>
四、平面缩放
目标：使用scale改变元素的尺寸 语法：transform: scale(x轴缩放倍数, y轴缩放倍数);
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放 transform: scale(缩放倍数); scale值大于1表示放大, scale值小于1表示缩小
五、渐变
目标：使用background-image属性实现渐变背景效果 语法：background-image：linear-gradient
一定要给背景图片添加，不是给背景颜色！！（渐变不是单指一种颜色）
渐变不能添加过渡！！！
渐变方向： 1.默认值 to bottom 从上往下 2.上到下 to top 3.右上角 toright top 4.角度deg
transparent是透明，这是常用写法 透明到黑色半透明的过程
总结： 1.属性必须给背景图添加 2.可以设置多种渐变色 3.设置多种渐变色分层的效果 4.设置渐变颜色方向：方位名词、deg:hover
transform属性可以连写，不然会层叠
过渡：
当涉及到位置有多个变化时，而只想要某个发现变化就要单独写
