字体图标,渐变,变形

字体图标的引用方式:[一般用i引用]

1.类引用

首先要link引入字体图标样式表.css文件,然后两个类名

• 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。

• 第二个类名 icon-***， 告诉盒子到底使用哪个小图标。

2.使用unicode编码(了解)

先引入link, 然后<strong class="iconfont"> &#xe8ab; </strong>

3.使用伪元素字体图标（记住）

先引入link, 使用伪元素字体图标，在content中间加入\****(除了后四个前面的用\)一定要声明字体。 font-family: "iconfont"

4.使用在线字体图标

  <!-- 引入字体图标文件 -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3276121_9b9eepa4f57.css">
<!-- 标签装字体 -->
<span class="iconfont icon-xxx"></span>

变形 transform（2D）

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

位移、[移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度 ]

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

他和margin的区别。

• margin移动盒子会影响其余的盒子。把其他人挤走。

• 位移translate移动盒子不会影响其他的盒子。不脱标。

应用- 盒子水平和垂直

top: 50%;
      left: 50%;

 transform: translate(-50%, -50%);

旋转、

旋转可以让盒子旋转角度。

语法：

transform: rotate(45deg);    一定写单位

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

设置中心点

 transform-origin

/* 设置旋转的中心点位置 */

  transform-origin: right bottom;

缩放

如代码:transform: scale(1.2)；

它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。

渐变

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