移动web第一天
字体图标
优点：
1.灵活 随时修改样式尺寸（font;color）
2.轻量级 体积小
3.兼容性好
4.使用方便
使用方式:
1.unicode
<!-- 第一步：引入 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
/* 第三步给家族 */
span {
font-family: "iconfont";
}
/* 修改字体图标和修改字体相同 */
.s1 {
font-size: 77px;
color: red;
}
</style>
</head>
<body>
<!-- 第二步找编码 -->
<span class="s1"></span>
<span></span>
</body>
</html>
2.font-class (在工作中最常用，方便高效)
<!-- 第一步还是引入 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
/* 可以再给类名单独设置 */
.s1 {
font-size: 77px;
color: red;
}
</style>
</head>
<body>
<!-- 工作中最常用方式 -->
<!-- 第二步写必须类名iconfont和图标类名 -->
<span class="iconfont icon-gouwucheman"></span>
<span class="iconfont icon-gouwucheman s1"></span>
</body>
</html>
如何使用SVG上传字体图标
1.打开iconfont网站
2.把svg上传
3.和之前一样下载使用即可
在线引入方式：
在iconfont网站上复制Font class 的代码,注意加“https:”
<!-- 在iconfont网站复制链接代码 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3243662_x4c7aqi3f7k.css">
<style>
/* 要设置字体样式必须再加类名 */
.s1 {
font-size: 88px;
color: red;
}
</style>
</head>
<body>
<!-- 还是一样的操作 -->
<i class="iconfont icon-time s1"></i>
<i class="iconfont icon-delete"></i>
</body>
font-class实现原理（面试题）
给对应的标签添加伪元素，伪元素的属性值content添加unicode编码。
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
div {
width: 100px;
border: 1px solid #ccc;
margin: 100px auto;
}
i::before {
font-family: iconfont;
content: "\e600";
}
i::after {
font-family: iconfont;
content: "\e60b";
}
</style>
平面转换
三大类
- 位移
- 旋转
- 缩放
作用
- 改变盒子在平面内的形态（位移，选择，缩放）
- 行业内叫2D转换 （其实就是X,Y轴方向）
- 由左到右，由上到下，所以x轴正方形是右，y轴正方向是下。
一、平面转换属性：translate：（位移）
位移语法：transform:translate(水平方向，垂直方向)
单位：可以是像素，也可以是百分比。
<style>
div {
width: 100px;
height: 100px;
background-color: red;
/* 位移属性值 */
/* 1.像素单位 */
/* transform: translate(0px, 0px); */
/* 2.百分比单位，相对于自身尺寸 */
/* transform: translate(100%, 100%); */
/* 3. x轴，y轴移动属性 */
/* 注意transform元素具有层叠性 不论X还是Y写在下面的生效 */
transform: translateX(100px);
transform: translateY(100px);
}
</style>
使用位移属性来实现盒子的绝对居中：
1.定位＋外边距法(太死板，因为边距是相对于父元素修改，改自身宽高的一半)
2.定位＋位移百分比(位移百分比相对于自身宽高的百分比修改，不论宽高改了，始终是百分比)
混淆点：为什么外边距不能百分比，因为外边距是相对于父元素而位移百分比相对于自身为什么外边距不能百分比，因为外边距是相对于父元素而位移百分比相对于自身
<style>
.father {
width: 600px;
height: 600px;
background-color: red;
margin: 100px auto;
position: relative;
}
.son {
position: absolute;
left: 50%;
top: 50%;
/* 外边距法死板，自身宽高改自己也得改
margin-top: -200px;
margin-left: -200px; */
/* 用位移百分比单位，移动自身单位一半，宽高变了不用调也还是一半 */
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background-color: pink;
}
</style>
二、平面转换属性：rotate (旋转)
旋转语法：transform:rotate
旋转单位：角度单位deg (正数顺时针旋转，负数逆时针旋转)
<style>
img {
display: block;
width: 300px;
height: 300px;
margin: 100px auto;
/* 可以省略ALL */
transition: 1s;
}
img:hover {
transform: rotate(720deg);
}
</style>
transfotm-origin转换旋转原点
语法：默认原点是盒子中心
transfotm-origin：原点水平位置，原点垂直位置
取值：方位，像素，百分比
<style>
img {
display: block;
width: 300px;
height: 300px;
margin: 100px auto;
/* 可以省略ALL */
transition: 1s;
border: 1px solid #ccc;
/* 方位 */
transform-origin: left top;
/* 像素 */
transform-origin: 0px 300px;
/* 百分比 */
transform-origin: 100% 100%;
}
img:hover {
transform: rotate(720deg);
}
</style>
三、平面转换复合写法(多重转换)
transform: translate() rotate();
先位移后旋转和先旋转后位移效果不一样
1.如果先旋转，那么在旋转的时候对应坐标X轴也旋转，会朝着X轴位移。
2.为什么要复合写法？因为如果分开写，因为都是transform，会被层叠覆盖
<style>
div {
width: 800px;
border: 1px solid #333;
margin: 100px auto;
}
img {
width: 200px;
/* 过渡！ */
transition: 2s;
}
div:hover img {
/* 复合写法，盒子800减轮胎200刚好位移到最右 */
transform: translateX(600px) rotate(720deg);
}
</style>
四、平面转换属性：scale(缩放)
缩放语法：transform：scal(x轴缩放，y轴缩放)
transform：scale(整体缩放倍数)
<style>
div {
width: 320px;
height: 230px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
transition: .3s;
}
img:hover {
transform: scale(1.5);
}
</style>
案例思路(双开门，代码看VSC)：
1.先实现主要的，大概位置布局
1.大盒子和两个小盒子的位置摆放(加颜色) 用了定位
2.再去实现次要的
1.鼠标移入
1 .特效 用位移 有优化 再用过渡效果
2.背景图标效果等等
渐变
作用：
渐变是多个样式逐渐变化的视觉效果
一般用于盒子的背景
只能给背景图片添加
使用（线性渐变）：
第一种（默认）：background-image: linear-gradient(color,color,)
第二种（分层）：background-image: linear-gradient(color x%,color x%,)
第三种（方位）：background-image: linear-gradient(color to right,color)
第四种（角度）：background-image: linear-gradient(xdeg,color,color,)
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 400px;
height: 400px;
margin: 100px auto;
/* 基于常规写法在color前加to 方位名词 */
background-image: linear-gradient(to right top, red,black);
/* 也可以给角度deg */
background-image: linear-gradient(40deg, red, black);
/* 分层效果 百分比意思是例如0~20% 那后面如果想要20%~40%是黑色就写最终值40%*/
background-image: linear-gradient(red 20%, black 40%, orange 100%);
}
</style>
