字体图标 平面转换 渐变色的方法详解

一、字体图标

1、介绍：一种看起来像图片的文字字体。

     特点：加载速度快，兼容性高，灵活性强，可以通过css样式来修改属性。

2、使用

     （1）登录后，选择官方图标库，选择自己想要的图标，加入购物车。

     （2）选择完后，点击购物车，添加至项目，选择本地下载。

     （3）在html中 link 引入 iconfont.css

     （4）类名调用 和 Unicode调用， 代码如下：

    
    
    
    
    
    
    


    
    
    
    

二、平面转换

1、平面转换之位移

        位移：transform：translate(x,y);

                  translateX( );

                  translateY( );

2、平面转换之旋转

        旋转：transform：rotate( 360deg );   

        旋转方向：正值为顺时针，负值为逆时针。

        deg 为单位，表示度。

        改变旋转中心： transform-origin: ;  属性值为 left right top bottom center

3、多重转换

        当既要使用位移又要使用旋转时，应先位移在旋转，若先旋转，则会改变位移的坐标位置。

        transform: translate(x,y), rotate(360deg);

4平面转换之缩放

        缩放: transform: scale(倍数);

        当倍数大于1,则表示放大

        当倍数小于1,则表示缩小

三、渐变色

        background-image: linear-gradient( 颜色1 , 颜色2,...);

        改变颜色方向 ( to 到哪) , 默认为从上往下:

         background-image: linear-gradient( to right , 颜色1 , 颜色2,...);