移动web-字体图标
优点
- 灵活 随时修改颜色和尺寸(color ,font-size)
- 轻量级 体积小
- 兼容性好
使用方法
-
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>Document</title> <!-- 必须设置导入字体图库 --> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> /* 必须 给span标签设置字体家族 */ span { font-family: 'iconfont'; } /* 字体图片可以设置颜色，大小 */ .f1 { font-size: 200px; color: red; } </style> </head> <body> <span></span> <span class="f1"></span> </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> <!-- 1.引入 iconfont 文件 --> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> .so { font-size: 100px; color: blue; } </style> </head> <body> <!-- 2.给标签加类名 --> <span class="iconfont icon-yanjing1"></span> <span class="iconfont icon-yanjing1 so"></span> </body> </html>
如何使用svg上传生成对应的字体图标
平面转换
- 打开iconfont网站，把svg
旋转原点
渐变及方向角度
小总结
-
字体图标
- 灵活性：(修改 尺寸 ，颜色)
- 轻量级：体积小， 渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
- 使用方便
有免费字体库：iconfont的网站，从上面下载字体包
操作如下：
字体图标使用方法有两
-
复杂，不推荐使用： unicode
1.引入样式表：iconfont.ss
2.复制粘贴突变对应的 unicode 编码(&xe6f8;)
3.设置文字字体：span{font-familt:"iconfont"}
-
方便，快捷(推荐使用) ：iconfont
1.引入样式表：iconfont.css
2.调用图标对应的 类名，必须调用2个类名如：
-
iconfont类：基本样式，包含字体的使用
-
icon-xxx：图标对应的类名
案例：
<!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>
<!-- 1.----引入字体图标的样式文本 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
/* border: 1px solid #000; */
margin: 100px auto;
/* 水平 垂直 模糊 范围 颜色 */
box-shadow: 1px 1px 10px 5px blue;
/* 圆角 */
border-radius: 10px;
}
/* 给购物车图标加颜色 */
.cart {
color: red;
}
</style>
</head>
<body>
<div class="box">
<!-- 2.--使用iconfont 类名 俩个类 iconfont icon-xxx -->
<i class="iconfont icon-gouwucheman cart"></i>
<span>购物车</span>
<i class="iconfont icon-jiantou9"></i>
</div>
</body>
</html>
如何上传字体图标：
上传矢量图 ：
IconFont网站上传矢量图生成字体图标
- 与设计师沟通，得到SVG矢量图
- IconFont网站上传图标，下载使用
实操如下：
平面转换
- 改变盒子在平面的形态(位移，旋转，缩放)
- 属性为：transform
位移
-
语法：transform：translate(水平，垂直)
-
后面取值(正 ，负 均可)
可为： px 像素单位数值
% 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
-
技巧： translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()
使用位移居中，实现方法如下：
旋转
- 语法： 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>Document</title>
<style>
img {
/* 旋转必须加 过渡 */
transition: 5s;
}
.box:hover img {
transform: rotate(-1800deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/rotate.png" alt="">
<img src="./images/rotate.png" alt="">
</div>
</body>
</html>
转换原点
-
语法：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>Document</title>
<style>
.box {
margin: 100px auto;
width: 200px;
height: 200px;
}
img {
display: block;
width: 100%;
border: 1px solid #000;
/* 旋转必须加 过渡 */
transition: 5s;
/* 改变旋转中心点
1.方向
2.像素
3.百分比
*/
/* transform-origin: left bottom; */
/* transform-origin: 650px 650px ; */
transform-origin: 100% 100% ;
}
.box:hover img {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/rotate.png" alt="">
</div>
</body>
</html>
多重转换连写
位移 再 旋转 不能调乱顺序
缩放
-
语法：transform：scale(X轴放倍数,Y轴放倍数)
-
技巧： 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放 transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
渐变背景
-
语法：background-image:linear-gradient(颜色1，颜色2);
-
注意：
-
渐变 没有过渡效果（display：none）也是
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
实操如下：
<!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>
p {
margin: 0;
}
.box {
width: 350px;
height: 247px;
border: 1px solid #000;
position: relative;
}
.txt {
padding: 20px;
position: absolute;
left: 0;
bottom: 0;
color: white;
}
.txt span {
display: block;
margin-bottom: 7px;
font-size: 14px;
}
.txt p {
font-weight: 700;
}
.box .tupian::before {
content: '';
position: absolute;
top: 0;
width: 350px;
height: 247px;
/* 渐变效果 */
background-image:linear-gradient(
transparent,
rgba(0,0,0,.5)
);
/* 背景渐变 透明 */
opacity: 0;
/* 过渡动画 */
transition: .3s;
}
.box:hover .tupian::before {
/* 背景渐变 显示 */
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="tupian">
<img src="./images/pic1.png" alt="">
</div>
<div class="txt">
<span>智能体</span>
<p class="jiacu">打造行业智能体，共建全场景智慧</p>
</div>
</div>
</body>
</html>
