1、字体图标
下载字体图标(https://www.iconfont.cn/)
1.1步骤：
百度搜索iconfont
搜索字体图标并添加购物车
点击右上角购物车并添加至项目（如果没有项目就新建项目）
下载至本地，解压文件并放在需要使用的文件夹得根目录
1.2 unicode编码使用
步骤：
引入iconfont文件夹中的iconfont.css文件
通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来
声明字体图标库
/* 声明iconfont字体图标库 font-family: iconfont;*/
font-family: iconfont;
font-style: normal;
/* 字体图标的本质是文字 */
font-size: 40px;
color: orange;
}
1.3 类名使用
步骤：
- 引入iconfont文件夹中的iconfont.css文件
2.通过标签承接字体图标
类名：
第一个类名是固定的：iconfont;
第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可
<i class="iconfont icon-hetong icon1"></i>
···
1.4 在线链接调用
步骤：
-
在线引入字体图标，要在链接前面添加 http:
代码
1.5使用案例
1.购物车普通做法
2.搭配伪元素
2、平面转换
2.1平面位移
使用：transform: translate(x, y) 一个数值默认改变x轴
transform: translateX() transform: translateY()
取值情况：像素单位取值 百分比取值：参考盒子自身大小
使用时加上过渡：transition: all 0.5s;
注意点：
1、transform属性对于行内元素是无效的；
2、添加transform属性的盒子可以提高盒子层级，保留原来的位置————类似相对定位的特点
基本用法如图：
定位+tansform位移偏移实现盒子水平垂直居中
代码如下：
案例：双开门
效果图：
CSS代码如下
···
.box {
position: relative;
width: 1366px;
height: 600px;
background: url("./images/bg.jpg");
margin: 50px auto;
overflow: hidden;
}
.box::before,
.box::after {
content: '';
position: absolute;
top: 0;
width: 50%;
height: 600px;
background-image: url(./images/fm.jpg);
/* 添加过渡，谁在变化就给谁添加 */
transition: all .3s;
}
.box::before {
left: 0;
}
.box::after {
right: 0;
background-position: right;
}
/* 动态布局 */
.box:hover::before {
transform: translateX(-100%);
}
.box:hover::after {
transform: translateX(100%);
}
···
HTML布局
2.2平面旋转
使用：transform: rotate(角度); 角度 取值为正顺时针 取值为负逆时针
2.2.1 转换点原点用法 用空格隔开 默认原点是盒子中心点
1.取值方位名词最多 left center right top bottom
transform-origin: right bottom;
2.具体的像素单位（正负均可）
transform-origin: -100px 200px;
3.百分比(参照于盒子自身尺寸)
transform-origin: 50% 50%;
2.2.2 多重转换效果
写法：用空格隔开 transform: translateX(600px) rotate(360deg);
注意点：旋转会改变坐标轴方向
当平移与旋转一起使用的时候，要把平移放在旋转的前面
案例
2.3平面缩放
使用： transform: scale(倍数); 缩放: scale() 大于1表示放大，小于1表示缩小
案例：和平精英播放按钮缩放
3、背景颜色渐变
使用语法：background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：
方位：默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
2.角度deg：直接写度数即可，不用再加to
参数2：颜色1；
参数3：颜色2；
用法代码如下：
<style>
.box {
width: 300px;
height: 200px;
border: 2px solid orange;
/*
背景颜色渐变 bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：
方位：默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
2.角度deg：直接写度数即可，不用再加to
参数2：颜色1；
参数3：颜色2；.....
*/
/* background-image: linear-gradient(to right, #544a7d, #ffd452); */
background-image: linear-gradient(90deg, #544a7d, #ffd452);
}
</style>
day01综合案例：华为综合案例
实现：1.鼠标移动上盒子图片放大
2.鼠标移动上盒子出现背景渐变遮罩
3.鼠标移动上盒子文字向上
效果图如下：
html代码
<div class="box">
<ul>
<li>
<a href="#">
<img src="./images/pic1.png" alt="">
<div class="tit">
<h5>行业洞察</h5>
<h4>迈向智能世界2030</h4>
<p>了解更多<i class="iconfont icon-arrow-right"></i></p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="./images/pic2.png" alt="">
<div class="tit">
<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="tit">
<h5>《ICT新视界》刊首语</h5>
<h4>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h4>
<p>了解更多<i class="iconfont icon-arrow-right"></i></p>
</div>
</a>
</li>
</ul>
</div>
CSS代码
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.box a {
display: block;
width: 350px;
height: 247px;
color: #fff;
background-color: red;
position: relative;
overflow: hidden;
}
.box a img {
transition: transform .6s;
}
.box a:hover img {
transform: scale(1.2);
}
.box a::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(transparent, rgba(0,0,0,.6));
opacity: 0;
transition: opacity .3s;
}
.box a:hover::after {
opacity: 1;
}
.box li {
float: left;
margin: 20px;
}
.box .tit {
position: absolute;
left: 0;
bottom: -20px;
padding: 0 20px;
z-index: 2;
transition: bottom .6s;
}
.box a:hover .tit {
bottom: 20px;
}
.box .tit h4 {
margin-top: 4px;
margin-bottom: 30px;
}
.box .tit p i {
color: red;
}
</style>
~~明天继续努力丫！！！
