移动web复习第一天

1字体图标

使用方法：

1.iconfont-阿里巴巴矢量图标库 阿里巴巴字体库

下载字体包，使用字体图标。

引入字体图标样式表

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

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

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

使用字体图标 – 伪元素：

通过查看iconfont.css文件

例：

需加入： font-family: "iconfont" !important;

.icon-arrow-down:before{
    content:"\e665";
}

2平面转换

平面转换

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

2D转换

平面转换属性

transform

1.位移

语法 ：

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

取值（正负均可）

像素单位数值

百分比（参照物为盒子自身尺寸）

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

技巧 ：

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

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

居中效果：

position:adsolute;
left:50%;
top:50%;
transfrom:tranalate(-50%,-50%)

2，旋转

transform: rotate(角度);

注意：角度单位是deg

技巧：取值正负均可

取值为正, 则顺时针旋转

取值为负, 则逆时针旋转

3，转换原点

语法

默认圆点是盒子中心点

transform-origin: 原点水平位置 原点垂直位置;

取值

方位名词（left、top、right、bottom、center）

像素单位数值

百分比（参照盒子自身尺寸计算）

4，多重转换

tranaform:translate() roate();

5，缩放

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

技巧

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

transform: scale(缩放倍数);

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

6，渐变背景

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

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

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

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

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

第一个参数可以设置方向