使用字体图标和transform等

transform：变形 、转换

rotate:旋转 案例transfom:rotade(180deg) 或者1（turn） 1(turn)=360(deg)=转了一圈

skew:倾斜

scale:缩放

1.关于字体图标的具体步骤1选择图标库，2选择图标，3加入购物车，4在购物车里添加至选项，5下载至本地

2.引入相关文件 复制到Fonts文件夹里面，引入CSS<link rel="stylesheet" href="./fonts/iconfont.css">

3.使用类名引入字体图标，如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）

<span class="iconfont icon-daohangdizhi"></span>

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

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

小结：1.字体图标是前端工程师必须具备的知识点。

2.引用线上地址即可。 <link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">

3.调用 开发中最常用的是使用类名来调用，所以重点记住这个就可以了。 <span class="iconfont icon-daohangdizhi"></span>

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

位移 translate

translate可以让盒子沿着x轴或者y轴来移动。 语法： transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

他和margin有啥区别。

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

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

• 位移经常需要的场景：

  • 比如 盒子上下移动不影响其他盒子

  • 盒子水平和垂直居中，写法简单

  • 轮播图的动画效果

    注意：

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

旋转

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

语法：transform: rotate(45deg);    一定写单位。

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

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

transform-origin: right bottom;是设置中心点

多形态变形小技巧

1. 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。transform-origin: translate(-50%, -50%) rotate(360deg);注意，多个值之前用 空格隔开。

缩放 scale

语法 transfom:scale(1.2);它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他盒子

skew倾斜

transform:skwe(10deg,60deg);第一个值代表水平倾斜，第二个代表垂直倾斜

线性渐变linear-gradient

.box {
            width: 400px;
            height: 400px;
            /* 默认是垂直渐变色 */
            /* background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); */
            /* 通过方位名词调整 to就是从哪里开始*/
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
            /* 通过角度渐变 注意带单位deg*/
            background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
        }