前端——移动web开发1

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

1.字体图标

字体图标展示的是图标，本质是字体，可以用来处理颜色单一的图片，比如下图中蓝色框里的图标，都是用的字体图标，因为其本质是字体，所以可以使用文本的相关样式，比如修改字体大小，字体颜色的属性，字体图标也能生效，下图中的位置，购物车均是红色，这就是使用颜色属性修改的，字体图标的默认颜色都是黑色：

 字体图标的优点：

灵活性：灵活的修改样式，例如：尺寸，颜色等

轻量级：体积小、渲染快、降低服务器请求次数

兼容性：几乎兼容所有主流浏览器

使用方便：

1.下载字体图标

可以从这里下载Iconfont：https://www.iconfont.cn/

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

2.使用字体图标

在下载好的安装包中，找到html文件：

 打开html文件后，选择第二类，font class，里面的每个字体图标下面会有两个名字，选择以 .icon- 开头的名字，使用时只需复制对应的名字，复制时不需要把点（.）复制，或者粘贴之后删掉点（.）

 然后我们找到我们需要使用字体图标的html文件，引入字体图标的css文件：

 然后再向具体要使用的地方放span标签（其他标签也可，这里以span为例），然后引入两个类名，分别是字体图标库类名，和刚刚复制的字体图标类名

 

 这样，就成功引入一个字体图标，因为我们可能引入了不止一个字体图标，而每个字体图标都有两个类名，其中第一个类名，所有的字体图标都有引用，所以我们如果需要修改某个字体图标的样式，如颜色等，一定要使用第二个类名进行选择，修改。下面来看渲染效果：

 如果需要换一种颜色，可以给字体图标更换颜色，如：

2.平面转换

改变盒子在平面内的形态（位移，旋转，缩放），属于2D转换，平面转换属性：transform

2.1位移

transform：translate（x,y）

x，y分别表示水平方向，垂直方向上的位置值，可以是像素值，也可以是百分比（自身宽高的百分比），水平方向（x）上，左为负，右为正，垂直方向上（y），上为正，下为负，根据给定值的正负向对应方向移动

translate( )如果只给出一个值表示x轴方向移动距离
单独设置某个方向的移动距离: translateX（） & translateY( )
如何使用该方法让一个盒子水平垂直都居中：

1.先绝对定位

2.left和top的值都设置为50%，此时小盒子的左上角居于大盒子正中心，那么小盒子本身就会偏右下角

3.让盒子向左向上半个小盒子宽高（所以这里要设置宽高）

 这种办法可行，但是如果盒子宽高发生变化，因为外间距设置的是固定值，那么盒子的左和上边框的位置不会改变，右和下的边框会根据盒子宽高发生改变，此时小盒子便不再大盒子正中心

下面我们用transform：translate（x,y）

步骤大致相同，只是这次我们可以不必须设置宽高，且同样设置定位，左上均是50%，同样的，小盒子偏右下，然后我们使用位移让盒子向左，向上，位移值是自身宽或高的一半（50%），向左（x）为负，向上（y）为正，所以：

 两次的结果均能使小盒子位于大盒子正中心：

 2.2旋转

transform: rotate(角度);

注意：角度单位是 deg

取值 正负均可， 取值为 正 , 则 顺 时针旋转，取值为 负 , 则 逆 时针旋转

transform-origin 属性可以改变转换 原点

默认圆点是盒子中心点

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

取值：

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

         像素单位数值

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

旋转为动态效果，这里不在演示示例，可自行实验

2.3.多重转换

位移加旋转，可以 使用 transform复合属性 实现多形态转换

transform：tranlate（ ） rotate（ ）

旋转会改变网页元素的坐标轴向

先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

所以这里的顺序不能写反，一定要先写位移，再写旋转

如果写反了，位移就成了向蜗牛壳一样，从中心向外的螺旋状位移轨迹

2.4.缩放

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

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

        transform: scale(缩放倍数);

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

3.渐变背景

background-image属性可以实现渐变背景效果

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

一般用于设置盒子的背景

 

颜色可以设置透明色，transparent，表示方法与之前讲过的颜色表示方法一致，如rgba表示法，同时设置颜色和透明度等，示例如下：