【更新中】移动web笔记

一、字体图标

1.1 下载字体图标（了解）

1.2 使用字体图标（重点）

引入相关文件（前提）

1、复制相关的文件，到 fonts文件夹里面。

2、引入 css

<link rel="stylesheet" href="./fonts/iconfont.css">

1.3 使用类名引入字体图标（重点记住）

如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）

<span class="iconfont icon-daohangdizhi"></span>

• 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。
• 第二个类名 icon-daohangdizhi， 告诉盒子到底使用哪个小图标。

1.4 使用伪元素字体图标（记住）

<div class="car1">购物车</div>

这样结构比较的清晰，省了很多的小盒子

/*在伪元素前加图标*/ 
.car::before {
	font-family: 'iconfont';
    content: "\e63b";
}
/*在为元素后加图标*/
.car::after {
	font-family: 'iconfont';
    content: "\e686";
}

注意： 使用伪元素字体图标，一定要声明字体。 font-family: “iconfont”

二、变形 transform（2D）

变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）

2.1 位移 translate

translate可以让盒子沿着 x 轴或者 y 轴来移动。
注意：X轴正向为右，Y轴正向为下

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

注意：移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

transform: translateX(100%);

2.2 盒子水平和垂直

• 可以让一个子盒子在父盒子里面水平和垂直居中。

1、用外边距法

.box {
	width: 200px;
	height: 100px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	margin-top: 50px;
}

2、用 translatel 法

.box {
	position: absolute;
	left: 50%;
	top: 50%;
	/*向左上移动50%*/
	transform: translate(-50%, -50%);
}

位移取值为百分比数值，参照盒子自身尺寸计算移动距离

2.3 开门大吉案例

分析：
①：准备一个大盒子
②：左右两个子盒子
③：鼠标经过，左右两个盒子分别两边拉动
④：鼠标离开，还原

background-position: left;
background-position: right;

* {
    margin: 0;
    padding: 0;
    /*自动内减*/
    box-sizing: border-box;
}
.box {
    /*解决塌陷*/
    overflow: hidden;
    width: 1366px;
    height: 600px;
    margin: 50px auto;
    background: #98fb98;
}

.box::before,
.box::after {
    content: '';
    width: 50%;
    height: 600px;
    transition: .5s;
}
.box::before {
    float: left;
    background-color: pink;
}
.box::after {
    float: right;
    background-color: purple;
    /* 背景图片右对齐 */
    background-position: right center;
}
.box:hover::before {
    /* 百分比是盒子自身的宽度 */
    transform: translateX(-100%);
}
.box:hover::after {
    /* 百分比是盒子自身的宽度 */
    transform: translateX(100%);
}

2.4 旋转 rotate

旋转可以让盒子旋转角度。

transform: rotate(45deg);    // 一定写单位

如果是正度数，则是顺时针旋转
角度单位是 deg
如果是负度数，则是逆时针旋转

2.5 设置中心点 transform-origin

语法

• 默认圆点是盒子中心点
• transform-origin: 原点水平位置 原点垂直位置;

取值

• 方位名词（left、top、right、bottom、center）
• 像素单位数值
• 百分比（参照盒子自身尺寸计算）

 /* 设置旋转的中心点位置 */
transform-origin: right bottom;

2.6 多形态变形小技巧

1、如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。
2、注意，多个值之前用 空格隔开。

transform: translate(-50%, -50%) rotate(360deg);

2.7 缩放 scale

• transform: scale(缩放倍数);
• scale值大于1表示放大, scale值小于1表示缩小
• 它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。

transform: scale(1.2)；

2.8 案列

多行文字超出省略：

• display: -webkit-box;
• -webkit-box-orient: vertical;
• -webkit-line-clamp: 2;
• overflow: hidden;

2.9 渐变背景

使用background-image属性实现渐变背景效果

• 渐变是多个颜色逐渐变化的视觉效果
• 一般用于设置盒子的背景

background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))