字体图标
下载字体图标(https://www.iconfont.cn/)
处理简单的颜色单一的图片
步骤:百度搜索iconfont--素材库或者搜索你想要的字体图标--点击你想要添加的某个字体图标的购物车--点击右上角的购物车--选择添加至项目(没有项目要新建项目)--下载到本地,解压,解压的文件放在需要使用的文件夹的根目录
使用方法
Unicode编码引入
1.引入图标的样式表 iconfont.css
2.复制对应的的Unicode粘贴到元素里
3.设置文字的字体（不设置不生效）
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
i {
font-family: 'iconfont'; //必须要添加这行样式，
color: red;
font-size: 50px;}
</style>
编码引入
<i>& #xe611;</i>
font-class类名引入
1.引入字体图标样式表
2.调用图标对应的类名，必须是调用两个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名
3.行内元素
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.hao {
color: pink;
font-size: 100px;
}
</style>
类名引入 一定要有iconfont这个类名，要不不生效
<span class="iconfont icon-aixin hao"></span>
字体图标拓展
上传矢量图
使用场景:但我们没有字体图标和网上的字体图标不适用时，或者项目只给SVG图标时
1.上传SVG图标
2.去除图标颜色
3.下载使用
平面转换
使用transform属性实现元素的位移，旋转，缩放
位移
语法
transform:translate(水平移动距离，垂直移动距离)
transform: translate(0px, 0px);
transform:translateX(移动距离) → 水平移动向右
transform: translateX(100px);
transform:translateY(移动距离) → 垂直移动向下
transform: translateY(100px);
取值
方位名词（left、top、right、bottom、center）
右下
transform-origin: right bottom;
像素单位数值
转换原点
transform-origin: 100px;
百分比（参照盒子自身尺寸）
右下角
transform-origin: 100% 100%;
缩放
语法
transform:scale(x轴缩放倍数，y轴缩放倍数);
语法
transform:scale(x轴缩放倍数，y轴缩放倍数);
注意
一般情况下，scale只设置一个值，表示x轴和y轴等比例缩放
scale的值大于1表示放大，小于1表示缩小
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 600px;
height: 600px;
background-color: skyblue;
border: 10px solid pink;
margin: 200px auto;
overflow: hidden;
}
img {
display: block;
transition: 2s;
}
.box:hover img {
/放大1.5倍/
transform: scale(1.5);
}
</style>
<div class="box">
<img src="图片地址" alt="">
</div>
渐变
语法
background-image: linear-gradient(颜色1，颜色2,颜色3);
注意
一定要给背景图片添加不是背景颜色（渐变不止是一种颜色 至少两种颜色）
background-image: linear-gradient(red,blue)
可以划分渐变的大小
从上到下 红色渐变自身高度30%，绿色从30%-50%渐变，蓝色从50&-100%渐变
background-image: linear-gradient(red 30%,green 50%,blue 100%)
可以改变渐变方向
默认值to bottom 从上到下
background-image: linear-gradient(red,blue)
从下到上
background-image: linear-gradient(to top red,blue)
复制代码
从左上角到右下角
background-image: linear-gradient(to right top red,blue)
角度
background-image: linear-gradient(360deg red,blue)
