字体图标
下载字体图标（https://www.iconfont.cn/）
步骤：
1.百度搜索iconfont
2.在iconfont的素材库、或者搜索栏去搜索想添加的字体图标
3.把想要的字体图标添加到购物车
4.选择添加至项目（没有项目的要新建项目）
5.下载至本地，解压的文件放在需要使用的文件夹的根目录
使用方法
一：Unicode编码使用：
步骤：
1.引用iconfont.css；
2.利用空标签（大部分是i标签）去承接Unicode编码内容；
3.声明字体图标库 font-family: 'iconfont' ;
二.font-class 类名调用
步骤：
1.引用iconfont.css；
2.类名：
第一个类名是固定的：iconfont
第二个类名，打开demo.html文件，直接复制文字下方的类名即可
三：利用字体图标做出购物车模块
代码如下：
<!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>
<link rel="stylesheet" href="./iconfont/iconfont.css" />
<style>
a {
display: block;
width: 200px;
height: 50px;
box-shadow: 0px 2px 12px 2px rgb(0 0 0 / 30%);
text-align: center;
line-height: 50px;
color: #333;
text-decoration: none;
}
.icon1 {
color: #ff4403;
font-size: 26px;
}
</style>
</head>
<body>
<a href="#">
<i class="iconfont icon-gouwuche icon1"></i>
购物车
<i class="iconfont icon-jiantouxia"></i>
</a>
</body>
</html>
效果图：
四：字体图标搭配伪元素使用
步骤：
1.引入css文件
2.添加伪元素，content属性写：\字体编码，如：content: '\e602';
注意：字体编码在Unicode中获取（去掉前三字符跟后面分号），\的作用：编译
代码区域：
<!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>
<!-- 1.引入iconfont.css文件 -->
<link rel="stylesheet" href="./iconfont/iconfont.css" />
<style>
a {
display: block;
width: 200px;
height: 50px;
box-shadow: 0px 2px 12px 2px rgb(0 0 0 / 30%);
text-align: center;
line-height: 50px;
color: #333;
text-decoration: none;
}
a::before {
/* 1.在content内容中填充该字体图标的Unicode编码 */
/* 把前三字符跟后面分号去掉，在最前面添加\ */
/* \作用：编译 */
content: '\e602';
/* 2.声明字体图标库 */
font-family: 'iconfont';
font-size: 20px;
color: red;
margin-right: 6px;
}
a::after {
content: '\e613';
font-family: 'iconfont';
font-size: 20px;
color: blue;
margin-right: 6px;
}
</style>
</head>
<body>
<a href="#">购物车</a>
</body>
</html>
效果图：
在线引入字体图标
链接获取途径：
1.打开iconfont首页，在头部导航的资源管理器中点击‘我的项目’
2.在项目中选择font-class，再点击旁边的获取在线链接，复制代码引入到vscode里面即可
注意：引入字体图标前link的href属性要添加完整的网页地址，在前面添加‘http:’才能生效
在线字体图标的优缺点：
优点---可以随时增加字体图标，只需更新字体图标的地址即可
缺点---在线字体图标打包的时候可能会丢失，一般工作中不用此方法。
上传svg文件
工作中如果遇到没有的字体图标，并且在iconfont网页中也搜索不到，此时需要自己上传svg文件，svg文件找UI小姐姐要
上传方法：
1.打开iconfont首页，点击右上角的上传图标
2.选择需要的svg文件上传，选择去颜色上传
3.上传完成后，点击批量操作，把需要的字体图标添加到购物车，下载使用即可
平面转换transform属性
①：translate位移
描述：网页看作一个平面，浏览器左上角为原点，X/Y轴分别向右，向下。
有X、Y轴，取值px，正值为X向右、Y向下。负值为X向左、Y向上
语法：
transform: translateX(100px);-------X轴向右移动100px
transform: translateX(-100px);-------X轴向左移动100px
transform: translateY(100px);-------X轴向下移动100px
transform: translateY(-100px);-------X轴向上移动100px
连写：
错误写法：
transform: translateX(100px);
transform: translateY(50px);
由于CSS的层叠性，上述写法是错误写法，最终只会显示Y轴向下移动50像素。
正确写法：
transform: translate(100px,50px)-------X轴向右移动100px，Y轴向下移动50px
注意：连写的第一个值代表X轴，第二个值代表Y轴，中间用英文逗号隔开。
transfrom的注意项：
1.transform属性对行内元素无效
2.添加了transform属性的盒子可以提高盒子层级，并保留原来位置，类似于相对定位的特点
3.translate只给一个值默认值为X轴移动
4.translate赋值为百分比的时候，参考的是盒子本身的大小进行位移
②：利用translate百分比实现盒子居中效果
代码：
<!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>
.father {
/* 父相 */
position: relative;
width: 500px;
height: 300px;
margin: 100px auto;
border: 4px solid #6cf;
}
.son {
/* 子绝 */
position: absolute;
left: 50%;
top: 50%;
/* 用margin实现居中的缺点：因为margin取值都是具体像素，所以当父元素修改宽高时，居中失效 */
/* margin-left: -100px;
margin-top: -100px; */
transform: translate(-50%, -50%);
/* 利用transform：translate属性，由于百分比参考的是子盒子自身的宽度，所以当父盒子宽高发生变化时，居中效果不受影响 */
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
因为translate赋值为百分比参考的是盒子本身大小进行位移，所以利用该特性来实现居中的话，居中效果不会受到父盒子宽高改变而受到影响。
用margin实现居中的缺点：因为margin取值都是具体像素，所以当父元素修改宽高时，居中效果会失效。
rotate旋转
顺时针旋转取正值，逆时针旋转取负值，单位deg
语法：
transform：rotate(360deg); 顺时针旋转360度
transform：rotate(-360deg); 逆时针旋转360度
利用：transform-origin属性来改变转换原点：
transform-origin的赋值：
1.取方位名词（left、right、top、center、bottom）用得最多
2.具体的像素单位（正负均可）
transform-origin: -100px -100px;
3.百分比（参考盒子自身尺寸）
transform-origin: 50% 100%;
多重转换效果：
需求：水平移动的过程中还旋转着
错误写法：
transform: translate(600px)
transform: rotate(720deg)
由于CSS的层叠性，只能实现旋转720度
正确写法：
transform: translate(600px) rotate(720deg);
注意：由于旋转会改变坐标轴的方，当平移与旋转一起使用的时候，要把平移放在旋转的前面
scale缩放
可以实现盒子的缩放，默认值为1，大于1表示放大，小于1表示缩小
语法：
transform: scale(1.2); ------表示放大为原来的1.2倍
transform: scale(0.8); ------表示缩小为原来的0.8倍
案例：和平精英-缩放
代码：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 250px;
height: 200px;
border: 1px solid #000;
margin: 100px;
line-height: 1.5;
/* 溢出隐藏 */
overflow: hidden;
}
.pic img {
width: 100%;
}
/* 刚开始的状态，图片放大5倍且要透明 */
.pic {
position: relative;
}
.pic::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(5);
width: 58px;
height: 58px;
background: url(./images/play.png);
opacity: 0;
transition: all 0.3s;
}
/* 当鼠标移在box上时，要显示出正常倍数的播放图片 */
.box:hover .pic::after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="./images/party.png" alt="" />
</div>
<p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
</div>
</body>
</html>
效果图：
背景渐变：background-image: linear-gradient
语法：
background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：
方位：默认的方位从上到下
1.方位名词：to right,to right bottom
2.角度deg：直接写度数即可，不用再加to
参数2：颜色1；
参数3：颜色2；.....
代码：
<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: 200px;
border: 2px solid orange;
background-image: linear-gradient(49deg, #59c173, #a17fe0, #5d26c1);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果图：
产品展示案例
代码：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 350px;
height: 247px;
line-height: 1.5;
margin: 100px;
}
.box .title {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
padding: 20px;
z-index: 3;
}
.box h5 {
font-weight: 400;
}
/* 当鼠标移入盒子的时候，出现一个遮罩层，并且遮罩层的背景颜色是渐变的 */
.box::after {
position: absolute;
left: 0;
top: 0;
content: "";
width: 100%;
height: 100%;
background-color: pink;
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
/* 一开始先隐藏 */
opacity: 0;
/* 过度，注意：display：none；跟visibility：hidden；是不能参与过度的 */
transition: 0.5s;
}
.box:hover::after {
/* hover之后显示 */
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pic.png" alt="" />
<div class="title">
<h5>智能体</h5>
<h4>打造行业智能体，共建全场景智慧</h4>
</div>
</div>
</body>
</html>
效果图：
华为综合案例
代码：
<!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>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
overflow: hidden;
}
.box a {
position: relative;
display: block;
width: 350px;
height: 247px;
}
.box li {
position: relative;
float: left;
margin: 20px;
}
.info {
position: absolute;
/* 提高文字盒子层级，不然会被后面的遮罩层覆盖掉 */
z-index: 2;
left: 0;
padding: 0 20px;
bottom: -30px;
color: #fff;
}
.info h5 {
font-weight: normal;
}
.info h4 {
margin-top: 5px;
margin-bottom: 20px;
}
.info p i {
color: red;
}
/* 1.图片动态效果 */
.box li img {
transition: all 0.5s;
}
.box li:hover img {
/* 图片缩放 */
transform: scale(1.1);
}
/* 2.改变info盒子的边偏移 */
.info {
transition: all 0.5s;
}
.box li:hover .info {
bottom: 30px;
}
/* 3.遮罩层，背景颜色为渐变 */
/* 此处不能用before，不然会被后面的元素层叠掉 */
.box li::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* 背景渐变 */
background-image: linear-gradient(transparent, rgba(0, 0, 0, .6));
opacity: 0;
}
.box li:hover::after {
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="#">
<img src="./images/pic1.png" alt="">
<div class="info">
<h5>《ICT新视界》刊首语</h5>
<h4>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h4>
<p>了解更多<i class="iconfont icon-arrow-right"></i></p>
</div>
</a>
</li>
<li><a href="#">
<img src="./images/pic2.png" alt="">
<div class="info">
<h5>产品</h5>
<h4>OceanStor Pacific海量存储斩获2021 Interop金奖</h4>
<p>了解更多<i class="iconfont icon-arrow-right"></i></p>
</div>
</a></li>
<li><a href="#">
<img src="./images/pic3.png" alt="">
<div class="info">
<h5>行业观察</h5>
<h4>迈向智能世界2030</h4>
<p>了解更多<i class="iconfont icon-arrow-right"></i></p>
</div>
</a></li>
</ul>
</div>
</body>
</html>
效果图：
