Web移动端-part01

一、字符图标

• 颜色单一使用字符图标，，多种使用精灵图
• 展示的是图标，本质是字体
• 优点：
  • 灵活性、轻量级、兼容性、使用方便
• 阿里图标库：https://www.iconfont.cn

---

使用方法：1.使用类名

• 引入

• 在fonts文件夹中找到demo-index.html,在font class中复制图标的类名

• 使用：<i class="iconfont icon-xxxx"></i>

• 可以更改样式用font系列，因为本质是字体，注意font-size设置需要添加!important提高权重

---

2.使用unicode编码

• 引入
• 在fonts文件夹中找到demo-index.html,在unicode中复制图标的编码
• 使用：<i class="iconfont">&#xxxx;</i>

3.使用伪元素

• 引入

• 在fonts文件夹中找到iconfont.css文件，打开复制字符编码

• 使用：

  • style中添加 i::before{ content=‘相应的字符编码’;}

  ---

  其实上面第一种和第二种两种方法的实质都是添加伪元素

  常用的是第一种添加类名的方法

线上引用方法将link中地址改为网址就行（记得添加http://）

二、平面转换

使用transfrom进行旋转、移动、缩放等操作

2.1 位移

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

• 正负均可
• 只给一个值的时候，表示x轴方向移动距离
• 单独设置 translateX() 和 translateY() 后面写的会被覆盖

---

margin与transform的异同：

• 相同点：
  • 都能移动盒子
• 不同点：
  • 100%移动时
    • margin移动的是父宽度的100%，
    • transform移动100%是自身宽度的100%
  • 外边距移动盒子会影响到下面的元素，transform2D位移不会影响下面的元素。

transform 移动后依旧是标准流，有类似relative的特点，会覆盖下面的元素

---

2.2 旋转

transfrom:rotate(角度)
 /* 角度单位deg(度)/turn(圈) */

注意位移+旋转连写时，为了不改变坐标轴，要先写位移。

transform:translate() rotate();

• 当在绝对定位中要求同时不同方向旋转需要分开写旋转值时，要记得CSS的层叠性，要再写一次translate值进行覆盖，写一样的就可以。

2.3 转换原点

transform-origin:原点水平位置（left center right） 原点垂直位置(top center bottom)；   
单位：px或百分比

2.4 缩放

transform:scale(缩放倍数);
/* 一般只设置一个值，会等比例缩放*/

---

做此类点击特效时建议先中文写出来变化的元素以及变化，再翻译为计算机语言

2.5 倾斜

transform:skew(角度deg）；
/* 一般不超过90度  盒子大小会变化*/

三、渐变

• 渐变色是使用背景图的写法
• 渐变色是由多个颜色组成

background-image:linear-gradient(颜色1，颜色2...)
/* 改变渐变色的方向  to left/right/top/bottom  到左..*/
background-image:linear-gradient（to bottom,颜色1，颜色2..）
/*改变颜色的倾斜角度  角度deg*/
background-image:linear-gradient(45deg,颜色1,颜色2....)

---

常用的背景色：

/* 透明色到黑色半透明*/
background-image:linear-gradient(transparent,rgba(0,0,0,0.5));

/*透明色到白色半透明*/
background-image:linear-gradient(transparent,rgba(255,255,255,0.5));