前端——移动web

#博学谷IT学习技术支持#

一、字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果

字体图标的优点：

• 灵活性：灵活地修改样式，例如：尺寸、颜色等
• 轻量级：体积小、渲染快、降低服务器请求次数
• 兼容性：几乎兼容所有主流浏览器
• 使用方便：

1. 下载字体包

登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

     2. 使用字体图标

 （1）引入字体图标样式表：iconfont.css

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

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

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

二、平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

（一）平面转换

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

（二）平面转换属性

1. transform

 （1）位移

目标：使用translate实现元素位移效果

1.语法

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

2.取值（正负均可）

    像素单位数值

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

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

3.技巧

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

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

 （2）旋转

目标：使用rotate实现元素旋转效果

1.语法

    transform: rotate(角度)

    注意：角度单位是deg

2.技巧：取值正负均可

    取值为正, 则顺时针旋转

    取值为负, 则逆时针旋转

 （3）转换原点

目标：使用transform-origin属性改变转换原点

1.语法

    默认圆点是盒子中心点

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

2.取值

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

    像素单位数值

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

（4）缩放

目标：使用scale改变元素的尺寸

1.语法

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

2.技巧

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

    transform: scale(缩放倍数)

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

三、渐变

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

1.  渐变是多个颜色逐渐变化的视觉效果

     2. 一般用于设置盒子的背景

四、总结

今天开始复习移动web阶段，学习是一个不断接受新知识，不断回忆的过程。要有毅力，不放弃，大家一起加油呀！