字体图标
下载字体图标（https://www.icnfont.cn/）
步骤：百度搜索iconfont--素材库或者搜索栏去搜索你想添加的字体图标--点击你想要添加的某个字体图标的购物车--点击右上角的购物车--选择添加至项目（没有项目的要新建项目）--下载至本地，解压出来，解压的文件放在需要使用的文件夹的根目录
使用方法
1.unicode编码使用
步骤：
1.引入下载好的字体图标文件夹的iconfont.css;
2.利用空标签（大部分是利用i标签）去承接unicode编码内容；
3.声明字体图标库 font-family:iconfont
2.font-class类名调用
步骤：
1.引入下载好的字体图标文件夹的iconfont.css
2.类名：
第一个类名是固定的：iconfont;
第二个类名：通过demo_index.html文件或者项目主页面，直接复制文字下的类名即可
3.在线引入字体图标
步骤：
1.登录阿里巴巴矢量图标库，打开我的项目，选择Font class，点击生成在线代码。
平面转换
transfrom属性可以实现元素的位移、旋转、缩放等效果
translate语法
transform: translate(水平移动距离, 垂直移动距离)
transform:translateX 单独的设置水平方向位移
transform：translateY 单独的设置垂直方向位移
transform：translate translate(100px,50px) |参数代表水平方向位移距离和垂直方向位移距离（X轴正向为右，Y轴正向为下），若为负数则代表反方向。
transform取值有px和百分比方式。百分比 取值：参考盒子自身大小。
转换注意点：
1.tf属性对于行内元素是无效的；
2.添加了tf的属性的盒子可以提高盒子层级，保留原来的位置---类似于相对定位的特点。
绝对定位居中：
实现方法一：
缺点:自身尺寸改变时，不能实现居中效果。
实现方法二：
通过将位移取值改为百分比数值，盒子自身尺寸改变时自动改变移动距离。
双开门案例：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 1366px;
height: 600px;
background: url("./images/bg.jpg");
margin: 50px auto;
overflow: hidden;
}
/* 利用::before和::after创建左右门 */
.box::before,
.box::after {
position: absolute;
top: 0;
content: "";
width: 50%;
height: 100%;
background: url(./images/fm.jpg);
transition: 1s;
}
.box::after {
right: 0;
background-position: right;
}
/* 鼠标悬停box让左右门移动 */
.box:hover::before {
transform: translate(-100%);
}
.box:hover::after {
transform: translate(100%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
rotate语法
transform:rotate(角度)
注意：角度的单位时deg，取值正负皆可，取值为正, 则顺时针旋转；取值为负, 则逆时针旋转。
旋转案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>旋转效果</title>
<style>
img {
width: 250px;
transition: 1s;
}
img:hover {
/* 顺时针旋转 360deg */
transform: rotate(-360deg);
/* 逆顺时针旋转 360deg */
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="" />
</body>
</html>
transform-origin属性
transform-origin属性可以改变转换原点
transform-origin语法：
transform-origin:圆点水平位置 圆点垂直位置
取值：方位名词（left、top、right、bottom、center）,
像素单位数值，
百分比（参照盒子自身尺寸计算）
注意：默认圆点是盒子中心点，取值不用括号括起来。
转换圆点案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>转换原点</title>
<style>
img {
display: block;
width: 250px;
border: 1px solid #000;
margin: 200px auto;
transition: all 3s;
/* 1.取值方位名词 最多 */
transform-origin: right bottom;
/* 2.具体的像素单位（正负均可） */
transform-origin: -100px -100px;
/* 3.百分比(参照于盒子自身尺寸) */
/* transform-origin: 50% 50%; */
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="" />
</body>
</html>
transform复合属性的使用
transform复合属性可实现多形态转换
transform:translate() rotate();
多重转换原理
Ø 旋转会改变网页元素的坐标轴向
Ø 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
多重转换案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>平面转换的三个效果图</title>
<style>
div {
height: 200px;
border: 5px solid rgb(155, 90, 90);
margin-bottom: 20px;
}
img {
height: 100%;
/* 过渡 */
transition: 1s;
}
.box1:hover img {
transform: translateX(500px);
}
.box2:hover img {
transform: rotateZ(360deg);
}
.box3:hover img {
transform: scale(1.3);
}
</style>
</head>
<body>
<div class="box1">
<img src="./images/daji.jpg" alt="" />
</div>
<div class="box2">
<img src="./images/daji.jpg" alt="" />
</div>
<div class="box3">
<img src="./images/daji.jpg" alt="" />
</div>
</body>
</html>
scale语法
使用scale属性可以改变元素尺寸
transform: scale(x轴缩放倍数, y轴缩放倍数);
Ø 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
Ø transform: scale(缩放倍数);
Ø scale值大于1表示放大, scale值小于1表示缩小
缩放案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>缩放效果</title>
<style>
.box {
width: 300px;
height: 210px;
margin: 100px auto;
background-color: skyblue;
border: 10px solid #000;
overflow: hidden;
}
.box img {
width: 100%;
transition: all 0.5s;
//过渡属性
}
.box:hover img {
/* 缩放: scale() 大于1表示放大，小于1表示缩小,等于1原大小相当于没有设置 */
/* transform: scale(1.3，1.3); */
transform: scale(1.3);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/product.jpeg" alt="" />
</div>
</body>
</html>
渐变
background-image属性
使用background-image属性可以实现渐变背景效果
background-image语法：
background-image:linear-gradient(颜色1，颜色2);
