移动Web（字体图标、平面转换、颜色渐变）

记录一下自己学习的内容，欢迎大家评论与指正。  

字体图标

Unionde 引入方法:

1. 引入 iconfont.css 文件
2. 准备一个标签，给这个标签加一个 iconfont 的类名
3. 找到 demo_index.html 复制对应的字体编码 放入标签中
   
    

Font class 引入方法:

1. 引入 iconfont.css 文件
2. 给某个标签添加两个类名 iconfont icon-xxx
   • iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。
   • icon-daohangdizhi， 告诉盒子到底使用哪个小图标。
     
      

伪元素显示字体图标

1. 引入 iconfont.css 文件

2. 给标签添加 伪元素

3. 从 demo_index.html 找到文字图标对应的 Unicode值，复制从 e 字母开始值，放到伪元素 content 属性中

4. 给为元素添加 font-family 属性 值为 iconfont.css 中 font-family 的值

   注意： 使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"

   
    

变形 transform

位移 translate

translate: 可以让盒子沿着x轴或者y轴来移动。

    //x,y 可以为百分比和像素值
    transform: translate(x, y);  
    transform: translateX(x);  
    transform: translateY(y);    

1. 移动的时候可以写百分比，如果使用的百分比，移动的是盒子 自身的宽度
2. translate 只设置一个值时，相当于 translateX

 

旋转 rotate

• rotate: 旋转可以让盒子旋转角度。

    //如果是正度数，则是顺时针旋转
    //如果是负度数，则是逆时针旋转
    transform: rotate(45deg);    //一定写单位  
  

• transform-origin: 设置旋转的中心点位置

    transform-origin: right bottom;   
  

• 多形态变形小技巧

     //如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行
     transform: translate(-50%, -50%) rotate(360deg);  
  

  注意:多个值之前用 空格隔开。  

 

缩放 scale

scale: 他是用中心点来进行缩放的，同样他不会影响其他的盒子。

    transform: scale(1.2)；   

scale 会影响元素的层级，需要使用 z-index，z-index 只能作用在定位元素上

 

渐变 linear-gradient

基本语法：

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