移动Web -01字体图标

下载字体包:

字体图标:

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

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

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

第一种方法-类名：

1. 引入字体图标样式表

字体图标的线上用法:

 <link rel="stylesheet" href="at.alicdn.com/t/c/font_39…

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

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

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

注意点:

注意:

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

2.类名出错显示长方形

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

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

第二种方法:unicode编码：

(1) 

(2) 

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

第三种方法:伪元素

(1)

(2)

(3)

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

i::after{

content: '\e667';

}

移动Web-02平面转换****

一. 位移

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);

二. margin和translate的区别

margin:

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

translate:

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

三. 盒子居中

方法一:定位+margin

方法二:定位+位移

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

四.旋转

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

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

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

.box:hover img {

transform: rotate(100turn);

}

/* 旋转

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

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

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

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

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

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

/* 左上角 */

/* transform-origin:left top; */

/* 右上角 */

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

/* 上中旋转 */

transform-origin:50% 0;

五. transform复合属性

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

.box:hover img{

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

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

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

六. 缩放

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倍以上是放大 */

六. 倾斜

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

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

/* 解决:2d倾斜 */

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

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

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

transform:skew(60deg)

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

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

/* 2d推荐综合写法

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

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

移动Web-03渐变****

一. 线性渐变

/* 语法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));

二. 径向渐变

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

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

移动Web-字体图标,平面转换,渐变