移动Web-字体图标的使用,平面转换,渐进

移动Web -01字体图标

下载字体包:

登录→ 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

字体图标:

步骤1：复制相关文件到本地目录下，并引入字体图标css文件。

步骤2:标签使用字体图标。

使用字体图标的三种方法:

第一种方法-类名：

1. 引入字体图标样式表

<!-- 1.引入字体图标的css -->

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

字体图标的线上用法:

<!-- 1.把线下本地的iconfont.css换成在线的地址,前面记得带上http:协议进行引入即可 -->

<link rel="stylesheet" href="" target="_blank">http://at.alicdn.com/t/c/font_3930692_f32ngekk9y.css">

2.调用图标对应的类名，必须调用2个类名

(1)iconfont类：基本样式，包含字体的使用等

(2)icon-xxx：图标对应的类名

<!-- 2.使用标签添加类名 必须携带iconfont 字体图标对应的类名 icon-xxx -->

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

注意点:

<!-- 注意:

1.css引入路径不要出错,页面出现空白

2.类名出错显示长方形

3.使用类名引入字体图标名前边不要带点

4.添加字体样式时需要注意权重问题 -->

第二种方法:unicode编码：

(1)

<!-- 1.引入对应的字体图标的iconfont.css -->

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

(2)

<!-- 2.需要一个标签,添加必须添加类名iconfont 第二个类名换成unicode编码即可,填写入标签的内容 -->

<i class="iconfont">unicode编码</i>

第三种方法:伪元素

(1)

<!-- 1.引入iconfont.css -->

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

(2)

<!-- 2.使用一个标签生成伪元素 -->

<i class="iconfont"></i>

(3)

/* 3.去iconfont.css文件中复制对应的编码即可 */

i::after{

content: '\e667';

}

移动Web-02平面转换

1. 位移

transform: translate(水平移动距离, 垂直移动距离);

取值（正负均可):像素单位数值,百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

/* 2d位移 位移盒子 */

/* 属性名:transform 属性值translate(X轴,Y轴) */

/* X轴 左负 右正 Y轴 上负 下正 */

transform: translate(100px,0px);

translate()如果只给出一个值, 表示x轴方向移动距离

单独设置某个方向的移动距离：translateX() & translateY()

/* 位移单独写法 */

/* transform: translateX(100px) translateY(0px); */

/* 推荐单独写一个,注意x和y要大写 */

transform: translateX(100px);

transform: translateY(0px);

2.margin和translate的区别:

margin:

/* 1.margin外边距的百分比是父盒子的大小,在移动时会影响其他的盒子 */

Translate:

/* 2.translate位移移动的百分比是自己的大小,在移动时不会影响其他的盒子,由类似于相对定位的特点 */

3.盒子居中

方法一:定位+margin

方法二:定位+位移

方法三:子绝父相+margin:auto

4.旋转

Ø transform: rotate(角度); 注意：角度:deg 圈数:turn

l 技巧：取值正负均可;取值为正, 则顺时针旋转;取值为负, 则逆时针旋转

/* 需求:鼠标移入盒子需要让图片进行旋转 */

.box:hover img {

transform: rotate(100turn);

}

/* 旋转

语法:transform:rotate(角度):deg度数 turn圈数

正值是顺时针 负值是逆时针 */

4-1.改变盒子旋转中心

/* 改变盒子旋转中心 */

/* 语法:transform-origin:水平 垂直; */

/* 取值可以是px %(自己的大小) 方位名词; */

/* 左上角 */

/* transform-origin:left top; */

/* 右上角 */

/* transform-origin:200px 0px; */

/* 上中旋转 */

transform-origin:50% 0;

5.transform复合属性

transform:translate()rotate() 先位移再旋转

.box:hover img{

transform: translate(900px) rotate(7200turn);

/* 注意点:使用transform复合先位移在旋转,如果先旋转再位移则坐标轴在旋转的过程中发生改变 */

/* 推荐写法顺序:transform:位移 旋转 */

6.缩放

transform: scale(缩放倍数);

transform: scale(x轴缩放倍数, y轴缩放倍数);

注意:

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

scale值大于1表示放大, scale值小于1表示缩小

/* 语法:transform:scale(水平缩放,垂直缩放); */

/* 一般我们只设置一个值,取的取值不带单位,倍数 */

.box:hover {

/* 宽和高等比例缩放2倍

transform:scale(2); */

/* 1倍就是不变

transform:scale(1); */

/* 1倍以下是缩小

transform:scale(0.5); */

/* 负值 值小于-1是缩小 值大于-1是放大 */

transform:scale(-0.5);

}

/* 需求:如何在不改变宽高情况下让盒子增大? */

/* 解决方法:内边距+边框 */

/* 需求:在不改变宽高情况下同时不设置盒子模型情况下让盒子增大? */

/* 解决方法:2d缩放 */

/* 注意点:缩放可以取负值缩小,缩小的倍数为1表示不变,1倍以下是缩小,1倍以上是放大 */

7.倾斜

角度不能是90deg,正值向右,负值向左

/* 需求:正方形盒子变成平行四边形 */

/* 解决:2d倾斜 */

/* 语法:transform:skew(deg) */

/* 注意点:角度不能是直角90deg */

/* 正值向右 负值向左 */

transform:skew(60deg)

/* 倾斜单独写法:skewX水平倾斜 skewY垂直倾斜 */

/* transform:skew(-20deg); */

/* 2d推荐综合写法

transform:位移 旋转 缩放 倾斜 */

/* 注意点:倾斜的盒子也会影响盒子宽高 */

移动Web-03渐变

1. 线性渐变

/* 语法background-image:linear-gradient(,颜色1,颜色2) */

background-image: linear-gradient(red, green, blue);

/* 改变渐变色的方向,添加属性to 结束的位置 取值(left top right bottom) */

background-image: linear-gradient(to right, red, green, blue);

/* 改变渐变色的方向,添加角度 单位为deg */

background-image: linear-gradient(60deg, red, green, blue);

/* 常用 透明色,黑色半透明渐变色 */

background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));

2.径向渐变

/* 拓展:径向渐变 从内到外渐变 根据盒子形状变成对应图形 正方形->圆形 */

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