移动web 01
1.字体图标
1.1概念
字体图标也是一种字体（展示的是图标，本质是字体）
优点：
- 1.灵活性： 方便修改大小和颜色
- 2.轻量级：体积小 用户打开加载起来很快
- 3.兼容性： 都通用
图库标 阿里矢量图标志网址
- Iconfont：https://www.iconfont.cn/
下载字体包：
登录——选择图标库——选择图标，加入购物车——购物车——添加至项目——下载至本地
1.2使用方式
两种使用方式
1.unicode编码 不常用 不直观 了解即可
2.font-class 简单 工作常用
1.2.1 unicode 使用演示
使用字体图标——Unicode编码：
- 引入样式表：iconfont.css
- 复制粘贴图标对应的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"><link rel="stylesheet" href="./font_3374677_aqnyo2vmjmh/iconfont.css"><title>字体图标</title><style>h1{font-family: 'iconfont';}</style></head><body><h1></h1></body></html>
1.2.2 font-class 常用
1.引入字体图标样式文件
2.必须写两个 class
1.iconfont 类：基本样式，包含字体的使用等
2.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">
<link rel="stylesheet" href="./font_3374677_aqnyo2vmjmh/iconfont.css">
<title>Document</title>
<style>
.iconfont{
border: 1px solid pink;
color: red;
font-size: 100px;
}
</style>
</head>
<body>
<div class="jb"> <span class="iconfont icon-fabulous"></span></div>
</body>
</html>
1.2.3 使用在线字体图标
把所需要的图标放置到自己的项目当中
使用在线链接 http：// + 在线链接 (需点击生成)
复制代码即可
若：如果需要添加更多字体图标，将你所需的图标添加到你的项目中
然后更新你的链接，将旧的在线链接替换成新的在线链接
再引入你的图标对应的类名 就可以实现
2.平面转换
transform属性 实现元素的位移、旋转、缩放等功能
- 改变盒子在平面内的状态（位移、旋转、缩放）
- 2D转换
- 平面转换属性——transform
2.1位移
- 语法：transform: translate（水平移动距离、垂直移动距离）;
- 取值（正负均可）
1.像素PX单位数值
2.百分比%（参照物为盒子自身尺寸） - 注：X轴正方向为右，Y轴正方向为下
- 技巧：translate（）如果只给出一个数值，表示x轴方向移动距离
- 单独设置某个方向的移动距离 : translateX（） & translateY（）
2.1.1位移——绝对定位居中
使用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>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
position: relative;
width: 600px;
height: 600px;
border: 3px solid black;
margin: 30px 80px;
}
.box-1{
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background-color: pink;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
<div class="box-1">
</div>
</div>
</body>
</html>
实现效果图片
2.1.2双开门——平移案例
双开门案例：运用 transform: 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>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
position: relative;
width: 1366px;
height: 600px;
background-color: pink;
margin: 50px auto;
overflow: hidden;
background-image: url(http://md.zbztb.cn/uploads/488463511779/bg.jpg);
}
.box::before,
.box::after{
content: "";
position: absolute;
top: 0;
width: 50%;
height: 100%;
}
.box::before{
left: 0;
/* background-color: aqua; */
background-image: url(http://md.zbztb.cn/uploads/488463511779/fm.jpg);
transition: 1s;
}
.box::after{
right: 0;
/* background-color: blueviolet; */
background-image: url(http://md.zbztb.cn/uploads/488463511779/fm.jpg);
background-position: right;
transition: 1s;
}
.box:hover::before{
transform: translate(-100%,0);
}
.box:hover::after{
transform: translate(100%,0);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
实现效果
2.2旋转
2.2.1 rotate
使用rotate实现元素旋转
语法：transform: ratate(角度); 角度单位: deg 取值：正负均可
取值为正，顺时针，取值为负，逆时针
2.2.2 transform-origin
转换原点：使用transform-origin属性改变转换原点
语法：默认圆点是盒子中心点
transform-origin：原点水平位置 原点垂直位置；
取值：
- 方位名词（left，top，right，bottom，center）常用
- 像素单位数值
- 百分比（参照盒子自身尺寸计算）
2.2.2.1 旋转案例
运用旋转和转换原点的知识点完成一个旋转卡片小案例
效果实现复制代码运行即可
<!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>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
width: 200px;
height: 200px;
border: 10px solid green;
margin: 200px 100px;
}
.box-1{
width: 180px;
height: 180px;
font-size: 40px;
color: white;
text-align: center;
line-height: 200px;
background-color: pink;
transform-origin:left bottom;
transform: rotate(90deg);
transition:all 2s;
}
.box:hover .box-1{
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box-1">帅</div>
</div>
</body>
</html>
2.2.3多重转换
使用transform复合属性实现多形态的转换
transform： translate() rotate();
注意：先实现位移在进行旋转
不可先旋转后位移，因为旋转可以改变坐标轴向
2.2.3.1案例实现——多重转换
实现先位移，再旋转，再缩放（可自行调节大小，颜色进行实验）
<!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>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
width: 600px;
height: 600px;
border: 1px solid black;
}
.box-1{
width: 100px;
height: 100px;
background-color: pink;
transition: 1s;
}
.box:hover .box-1{
transform: translate(200px) rotate(180deg) scale(3);
}
</style>
</head>
<body>
<div class="box">
<div class="box-1"></div>
</div>
</body>
</html>
2.3缩放
2.3.1scale
使用scale改变元素的尺寸
语法：transform: scale（x轴缩放倍数，y轴缩放倍数）；
技巧：一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放
transform: scale（缩放倍数）；
倍数大于1 是放大 0-1是缩小
2.3.1.1缩放案例实现
<!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>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
width: 354px;
height: 252px;
border: 2px solid black;
margin: 100px 200px;
overflow: hidden;
}
img{
transition: 1s;
}
.box:hover img{
transform:scale(2);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pic2.png" alt="">
</div>
</body>
</html>
3.渐变
3.1 background-image
使用background-image属性实现渐变背景效果
- 渐变是多个颜色逐渐变化的视觉效果
- 一般用于设置盒子的背景
语法：
background-image: linear-gradient{颜色 1，
颜色 2
}
透明颜色代码：transparent,rgba (0,0,0,0.6)
3.2渐变的方向
to bottom（默认）向下
to top，to right……
任意方向 角度来代替 deg
注：opacity 0~1 0为隐藏 1为显示
3.2.1渐变案例
简单的渐变效果，利用伪元素进行一种类似遮罩效果的实现
鼠标hover上去实现transparent,rgba(0,0,0,.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>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
position: relative;
width: 350px;
margin: 200px 200px;
}
.box::after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(transparent,rgba(0,0,0,.4));
opacity: 0;
}
.box:hover::after{
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pic.png" alt="">
</div>
</body>
</html>
若有收获，就点个赞吧
0 人点赞
