一、iconfont 阿里巴巴矢量图标库

1.地址 ：www.iconfont.cn/ （一定要注册登录 方便项目管理）

2.引入方式

(1).本地引入 （不推荐）

2.添加至项目

3.去到项目中下载代码

4.解压文件 link引入iconfont.css文件

5.调用方式

<i class="iconfont icon-XXX"></i>  //XXX为图标名

（2）在线引入（推荐）

1.搜索图标 添加至项目（同本地引入方法）

2.复制在线的链接

3.在自己的HTML页面引入复制的css链接

<linkrel="stylesheet"href="https://at.alicdn.com/t/xxxxx.css">

4.设置公共类目iconfont 再在项目里粘贴图标的类名即可

<i class="iconfont icon-xxx"></i>

（3）推荐图标网站

Font Awesome 4：fontawesome.dashgame.com/ (开源)

IcoMOON：icomoon.io/

二、2D变换、转换 transform

1、平面直角坐标系

从左到右是正值 从上到下是正值 反方向为负值

2、平移 translate(X,Y)

CSS

    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #333;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #6cf;
            /* 取值正负值都可以 正值代表正方向 负值代表负方向 */
            /* 注意 X正值向左 Y正值向下 */
            /* transform: translate(100px);  一个值时代表X轴 */
            /* transform: translate(100px,100px); 两个值时代表X轴和Y轴 */
            /* 百分比取值 以自身为参照物百分比取值 */
            /* transform: translate(50%); */
            /* 单独取值 */
            /* 
            transform: translateX(10px);
            transform: translateY(10px); 
            */
        }
    </style>

HTML

    <div class="box">
        <div class="box2"></div>
    </div>

3、旋转 rotate(角度)

css

 <style>
        .box{
            width: 100px;
            height: 100px;
            margin: 50px auto;
            background-color: #6cf;
            font-size: 60px;
            text-align: center;
            line-height: 100px;
            transition: 1s;
            /* transform: rotate(360deg); */
        }
        .box:hover{
            /* 取正负值都可以 正值顺时针旋转 负值逆时针旋转 */
            transform: rotate(360deg);
        }
    </style>

HTML页面

      <div class="box">+</div>

4.缩放 scale(倍数)

css

    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }
        .box1{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-color: #6cf;
            margin: 50px auto;
        }
        .box1:hover{
            /* 缩放 scale(水平倍数,垂直倍数) */
            /* 大于1放大 小于1缩小  输入一个值时默认代表水平和垂直均缩小或者放大*/
            transform: scale(1.5);
        }
    </style>

HTML

     <div class="box">
        <div class="box1"></div>
    </div>

5.斜切skew (不常用) 应用:擦亮效果

css

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 100px;
            background-color: #000;
        }

        .box::after {
            position: absolute;
            left: -120%;
            content: "";
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to right,
                    transparent, rgba(255, 255, 255, 0.459),
                    transparent);
            transform: skew(-30deg);
        }

        .box:hover::after {
            left: 120%;
            transition: .5s;
        }
    </style>

HTML

    <div class="box"></div>

6.转换原点 transform-orgin:水平 垂直

• 坐标 left左 top上 center居中 right右 bottom下
• 具体像素px

特别注意

• 行内元素设置转换无效
• 多个转换要写到同一个transform里面并且要用空格分隔开来
• 如果同时有平移(translate)和旋转(rotate) 最好先写平移。先写旋转有可能会该表坐标的方位。

三、背景渐变 linear-gradient(方向,颜色,颜色）

• 渐变的本质是背景图片 bacground-imgae:linear-gradient()
• 方向

1. 角度 -- 例如45deg 90deg 2.方位名词 to right 从左到右 to right top 从左下到右上 3.具体位置可以在浏览器中自行调试 ················································································································································································································· ### 更多前端知识关注公众号--微信搜索 郑郑的大前端 相关的文章将会同步发布