字体图标
1.字体图标展示的是图标,本质是字体
2.字体图标的优点:
灵活性:灵活的修改样式
轻量级:体积小,渲染快,降低服务器请求次数
兼容性:几乎兼容所以主流浏览器
3.下载字体图标(https://www.iconfont.cn/)
步骤:打开上面网址进入阿里矢量图标库→搜索查找想要的字体图标→添加购物车→在购物车中,添加至项目→下载至本地→解压下载的文件放在需要使用的文件夹根目录
使用方法
1.unicode编码使用
步骤:
1:引入下载好的字体图标文件中的iconfont.css
2.利用空标签(大部分使用i标签)去承接unicode编码的内容
3.声明字体图标库 font-family:iconfont
2.font-calss类名调用
步骤:
1.引入字体图标样式表
2.调用图标对应的类名,必须调用两个类名
iconfont类:基本样式,包含字体使用等(必写)
icon-xxx:图标对应的类名,通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可
3.上传SVG图标
步骤:
在阿里矢量图库点击上传按钮→上传SVG图标→找到本地图标SVG文件→去除颜色提交→加入购物车→添加至项目→下载使用
平面转换
目标：使用transform属性实现元素的位移、旋转、缩放等效果
平面转换属性:transform
1.位移
目标：使用translate实现元素位移效果
语法:transform: translate(水平移动距离, 垂直移动距离);
取值(正负值均可):1.像素数值 2.百分比(参照自身盒子)
x轴正方向为右,y轴正方向为下
translate()如果只给出一个值, 表示x轴方向移动距离
2.位移-绝对定位居中
目标：使用translate快速实现绝对定位的元素居中效果
核心代码:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
原理:位移取值为百分比数值，参照盒子自身尺寸计算移动距离
3.旋转
目标：使用rotate实现元素旋转效果
语法:transform: rotate(角度deg);
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转
/* 顺时针旋转 360deg */
transform: rotate(360deg);
/* 逆顺时针旋转 360deg */
transform: rotate(-360deg);
4.转换原点
目标：使用transform-origin属性改变转换原点
语法：transform-origin: 原点水平位置 原点垂直位置;
默认原点是盒子中心点
取值
***方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）
/* 1.取值方位名词 最多 tfo */
transform-origin: left bottom;
/* 2.具体的像素单位（正负均可） */
transform-origin: 100px 100px;
/* 3.百分比(参照于盒子自身尺寸) */
transform-origin: 50% 50%;
5.多重转换
目标：使用transform复合属性实现多形态转换
语法：transform：translate（） rotate（）；
多重转换原理：旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
<title>多重转换</title>
<style>
.box {
width: 800px;
height: 200px;
border: 1px solid #000;
margin: 200px auto;
}
img {
width: 200px;
transition: all 2s;
}
/* 走到右侧并且旋转一周 */
.box:hover img {
/*
注意点：旋转会改变坐标轴方向
当平移与旋转一起使用的时候，要把平移放在旋转的前面
*/
/* transform: translateX(600px); */
/* transform: rotate(720deg); */
transform: translate(600px) rotate(720deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tyre1.png" alt="" />
</div>
</body>
6.缩放
目标：使用scale改变元素的尺寸
语法：transform: scale(x轴缩放倍数, y轴缩放倍数);
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
<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表示缩小 */
/* transform: scale(1.2); */
transform: scale(0.8);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/product.jpeg" alt="" />
</div>
</body>
3.渐变
目标：使用background-image属性实现渐变背景效果
语法:
background-image:linear-gradient(
颜色1;
颜色2;
...
);
<title>渐变背景</title>
<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,#00c3ff,#ffff1c); */
background-image: linear-gradient(180deg,#00c3ff,#ffff1c);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
4.综合案例
效果:
代码:
<!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 {
float: left;
position: relative;
width: 350px;
height: 247px;
margin: 20px;
line-height: 1.5;
overflow: hidden;
}
.box:hover .title {
bottom: 0;
}
.box .title {
position: absolute;
left: 0;
bottom: -50px;
color: #fff;
padding: 20px;
z-index: 3;
transition: 0.6s;
}
.box h5 {
font-weight: 400;
}
.box .title p {
margin-top: 30px;
}
.box .iconfont {
vertical-align: middle;
color: #f00;
font-weight: 700;
}
.box::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
opacity: 0;
transition: 0.5s;
}
.box:hover::after {
opacity: 1;
}
.box img {
transition: 0.6s;
}
.box:hover img {
transform: scale(1.1);
}
</style>
</head>
<body>
<a href="#" class="box">
<img src="./images/pic1.png" alt="" />
<div class="title">
<h5>行业洞察</h5>
<h4>迈向智能世界2030</h4>
<p>了解更多<i class="iconfont icon-arrow-right"></i></p>
</div>
</a>
<a href="#" class="box">
<img src="./images/pic2.png" alt="" />
<div class="title">
<h5>产品</h5>
<h4>OceanStor Pacific海量存储斩获2021 Interop金奖</h4>
<p>了解更多<i class="iconfont icon-arrow-right"></i></p>
</div>
</a>
<a href="#" class="box">
<img src="./images/pic3.png" alt="" />
<div class="title">
<h5>《ICT新视界》刊首语</h5>
<h4>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h4>
<p>了解更多<i class="iconfont icon-arrow-right"></i></p>
</div>
</a>
</body>
</html>
