字体图标和平面转换

 一、字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果，字体图标展示的是图标，本质是字体，可以用来处理一些简单的、颜色单一的小图标。

引入：

图标库：Iconfont：https://www.iconfont.cn/ 阿里巴巴字体库 (常用)

①本地引入

首先下载字体包

登录iconfont账号（可以用新浪账号直接登录）→选择图标库→加入购物车→添加至项目（如果没有项目，可以在这边添加项目）

下载至本地

放入fonts文件夹

接着创建HTML文件，在head里面，用link引入fonts文件夹里面的iconfont.css 文件

最后使用类名引入字体图标击可以了

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

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

②引入线上文件

通过点击复制代码，然后在link引入时，将路径填写为复制的网址（记得前面加上https:    ）

 

③使用unicode编码

 将 unicode 下面的代码复制到我们之前的fonts文件夹里面的iconfont.css里面

然后直接在html文件里面，挑选相应图标并获取字体编码，应用于页面

<i> &#xe8ab;</i>

④使用伪元素图标

这样结构比较的清晰，省了很多的小盒子

首先创建一个html标签

然后在css里面添加伪元素

 

content 里面的代码，可以在线上网址里面找到，首先找到你所需要的图标代码

接着点击这里

进入源代码页，寻找刚才的图标代码所对应的符号

 

填写到自己的 content 里面即可

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

二、平面转换    transform （2D）变形

①  translate 位移

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

语法：transform: translate(x, y); 

或者只写其中一个轴（一定要注意大小写） transform: translateX(x);      transform: translateY(y);

单位px    也可以使用百分比，如果使用百分比，移动的是盒子自身的百分比

与margin的区别

margin移动盒会影响其余的盒子，把其他盒子都挤走

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

所以位移经常用到的场景就是盒子上下移动不影响其他盒子、盒子水平和垂直居中（写法比较简单）、轮播图的动画效果等等

② rotate 旋转

旋转可以让盒子在平面上转动起来

语法：transform: rotate(45deg);    （一定写单位 deg代表旋转多少度，还有 turn代表旋转的圈数）

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

旋转是需要配合 hover 设置过渡效果才可以看到

 

旋转还可以设置旋转中心点

正常情况下，旋转都是围绕自身的中心进行旋转，但是我们可以通过代码设置中心点的位置

transform-origin: 水平方向名词 垂直方向名词;

 多形态变形小技巧

如果需要移动，也需要旋转，则一定先写移动，后写旋转，多个值之前用 空格隔开

transform: translate(-50%, -50%) rotate(360deg);

③ scale 缩放

可以使盒子放大或者缩小

缩放是是用中心点进行缩放的，同时不会影响其他的盒子        

语法：transform: scale(缩放倍数)  示例：transform: scale(1.2)缩放至自身的1.2倍

④ skew 倾斜

可以使盒子沿着x轴或者y轴倾斜一定的角度

transform: skew(10deg,60deg);

第一个值代表水平倾斜   第二个值代表垂直倾斜（记得加上单位deg）

三、渐变

渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景

语法   background-image: linear-gradient（颜色1，颜色2，...）；

默认状态下渐变方向是从上到下

 不过我们可以通过设置代码改变颜色渐变方向

① to+方位名词  如：渐变方向改变为从左到右

background-image: linear-gradient（to right，颜色1，颜色2，...）

② 数字+deg   如：45°向右上侧渐变

background-image: linear-gradient（45deg，颜色1，颜色2，...）

使用的一些场景：自上而下 从透明到半透明

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