移动Web基础知识整理

一、CSS3

1.字体图标

1.1 字体图标的基本使用

iconfont字体图标的使用步骤：

• 下载解压放到根目录后，使用只需要分为两步

1. 引入对应iconfont的css文件

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

2. 页面中写入标签，加入iconfont的类名

   2个单词，多类名形式存在，一个是iconfont的公共类，另一个是图标的类名
   <i class="iconfont icon-favorites-fill"></i>
   

1.2 iconfont类

• 统一控制字体图标的字体类型 font-family:iconfont

• 统一控制字体图标的字号 font-size：16px

• 通过修改 .iconfont 实现统一修改字体图标或者通过修改 .icon-favorites-fill 实现单独修改字体图标

• 因为权重不够，i标签的权重为 0 0 0 1 ，类名的权重为 0 0 1 0。类名的权重比标签要大

1.3 字体图标-svg-上传-意义

场景：当自己项目中，没有阿里巴巴矢量图网站上的字体图标，需要自己上传独有的图标时

步骤：

1. 与设计师沟通，得到SVG矢量图
2. 去iconfont网站上传得到的SVG矢量图生成字体图标
3. 登录帐号
4. 点击上传按钮，并把svg文件拖到上传窗口中
5. 批量加入购物车
6. 添加到项目–对应项目
7. 下载至本地

2.平面转换

2.1 transform介绍

场景：让网页变的更加有意思，交互效果更加丰富，可以让元素位移、旋转、缩放等操作，平面指的2D平面，X/Y轴的正方形分别指:

Y轴是纵线，正方向朝下

X轴是横线，正方向朝右

2.2 平面转换-位移

• 语法：transform:translate(X轴位移, Y轴位移)
• 取值：像素单位、百分比单位（根据自身盒子大小）

例：盒子宽高200*100px，位移（-100%,50%），位移效果：

• 位移如果是百分比单位，位移是根据盒子自身大小来控制的，位移（-100%, 50%）换算成px单位为（-200px, 50px）

<div class="father">
   <div class="son"></div>
</div>

.father {
   
   width: 500px;
   height: 300px;
   margin: 100px auto;
   border: 1px solid #000;
}

.son {
   
   width: 200px;
   height: 100px;
   background-color: pink;
   transition: all 0.5s;
}

/* 鼠标移入到父盒子，son改变位置 */
.father:hover .son {
   
   transform: translate(100px);
}

2.3 位移技巧

2.3.1 单独移动

• translate(x,y) 可以分别写入X/Y的位移值，但是如果只写一个值就代表只移动X轴方向
• translateX是单独控制移动X轴方向的位移属性
• translateY(200px); translateY是单独控制移动Y轴方向的位移属性

2.3.2 定位盒子居中

一般的两种方法分别为：

1. 绝对定位 + margin回来自身盒子的一半
2. 绝对定位 + translate(-50%, -50%)回来自身的一半

优点：

1. translate的方法更有优势
2. margin 方法需要自己手动计算，而translate(-50%, -50%) 的方法自动计算

2.3.3 案例-双开门

步骤：

1. 准备一个大盒子box，拥有背景图
2. 在大盒子box中加入before和after的伪元素，分别用精灵图的方式分别显示左右两个盒子

• 浮动后才能让两个伪元素一排显示，并且没有任何间隙
• 伪元素必备属性是 content:’ '；

双开门-开门

左边 before 伪元素：让他向左移动一个自身距离，所以加上 translate(-100%)或translateX(-100%)

右边 after 伪元素：让他向右移动一个自身距离，所以加上 translate(100%)或translateX(100%)

谁动就给谁加过渡属性 transition 做动画。

.box {
   
   width: 1366px;
   height: 600px;
   margin: 0 auto;
   background: url('./images/bg.jpg');
   overflow: hidden;
}

.box::before,
.box::after {
   
   float: left;
   content: '';
   width: 50%;
   height: 600px;
   background-image: url(./images/fm.jpg);
   transition: all .5s;
}

.box::after {
   
   background-position: right 0;
}

/* 鼠标移入的时候的位置改变的效果 */
.box:hover::before {
   
   transform: translate(-100%);
}

.box:hover::after {
   
   transform: translateX(100%);
}
.box:hover::before,
.box:hover::after {
   
   transition: all .5s
}

<div class="box"></div>

2.4 平面转换-旋转

取值：旋转和位移公用一个transform属性，他们都属于平面转换属性

• 语法：**transform:rotate(角度deg)

• 正数 顺时针

• 负数 逆时针

实现步骤：

1. 引入img图片
2. 鼠标hover时设置旋转属性 transform:rotate(360deg)
3. 给img图片加上过渡属性transition:all 2s

2.5 平面转换-旋转原点

• 语法：transform-origin属性可以改变元素旋转、缩放的属性转换中心位置 比如：元素旋转，默认以正中心旋转（类似于风车）。通过transform-origin属性可以切换位置，按照右下角旋转

transform-origin属性的取值方式：

1. 方位名称（left、top、right、bottom、center）
2. 像素单位
3. 百分比（参照自身大小）

2.6 平面转换-多重旋转

使用场景：出现稍微复杂的动画效果，需要同时旋转和位移的时候，除了轮胎滚动案例外，还有类似的足球、小熊奔跑都可以使用到该属性

平面转换的复合写法位移和旋转之间用空格隔开

transform:translate(x, y) rotate(deg)

同时需要位移和旋转的时候，我们优先写位移

• 一般情况下需要优先写位移，再写旋转 因为旋转会影响XY轴的方向，导致在偏移的过程中不断朝新的方向移动，给我们带来理解上的障碍。所以大家切记优先位移后旋转

2.7 平面转换-缩放

• 语法：transform:scale(x缩放倍数, y缩放倍数)

• 取值：无（倍数）

• 2 代表放大两倍

• 1 代表不缩放

• 0.8 代表缩小为0.8倍

2.8 平面转换-倾斜

倾斜属性类似于translate，可以分开写，也可以组合在一起

/* 1. 单独控制X轴倾斜  */
transform:skewX(deg)
/* 2. 单独控制Y轴倾斜  */
transform:skewY(deg)
/* 3. X/Y轴同时倾斜  */
transform:skew(xdeg,ydeg)
/*单位：deg 度数*/

3. 渐变

3.1 渐变

渐变的使用场景

线性渐变：linear-gradient

径向渐变：radial-gradient

• 多个背景颜色逐渐变化的视觉效果，为了美观、凸显视觉效果的时候可以使用

• 渐变是背景属性

background-image:linear-gradient(颜色1, 颜色2);
background-image:linear-gradient(pink, black);

background-image:radial-gradient(颜色1, 颜色2);
background-image:radial-gradient(red, green);

background-image:radial-gradient(颜色1, 颜色2);
background-image<