移动web第一天---字体图标、平面转换、渐变

字体图标

下载字体图标（https://www.iconfont.cn/）
步骤：
1.百度搜索iconfont
2.在iconfont的素材库、或者搜索栏去搜索想添加的字体图标
3.把想要的字体图标添加到购物车
4.选择添加至项目（没有项目的要新建项目）
5.下载至本地，解压的文件放在需要使用的文件夹的根目录

使用方法

一：Unicode编码使用：

步骤：
1.引用iconfont.css；
2.利用空标签（大部分是i标签）去承接Unicode编码内容；
3.声明字体图标库 font-family: 'iconfont' ;

Unicode使用方法

二.font-class 类名调用

步骤：
1.引用iconfont.css；
2.类名：
第一个类名是固定的：iconfont
第二个类名，打开demo.html文件，直接复制文字下方的类名即可

font-class使用方法

三：利用字体图标做出购物车模块

代码如下：

    
    
    
    
    
    



    
        
        购物车
        
    

效果图：

字体图标实现购物车模块

四：字体图标搭配伪元素使用

步骤：
1.引入css文件
2.添加伪元素，content属性写：\字体编码，如：content: '\e602';
注意：字体编码在Unicode中获取（去掉前三字符跟后面分号），\的作用：编译
代码区域：

    
    
    
    
    
    
    



    购物车

效果图：

伪元素搭配字体图标实现购物车模块

在线引入字体图标

链接获取途径：
1.打开iconfont首页，在头部导航的资源管理器中点击‘我的项目’
2.在项目中选择font-class，再点击旁边的获取在线链接，复制代码引入到vscode里面即可
注意：引入字体图标前link的href属性要添加完整的网页地址，在前面添加‘http:’才能生效

在线引入字体图标.png

在线字体图标的优缺点：
优点---可以随时增加字体图标，只需更新字体图标的地址即可
缺点---在线字体图标打包的时候可能会丢失，一般工作中不用此方法。

上传svg文件

工作中如果遇到没有的字体图标，并且在iconfont网页中也搜索不到，此时需要自己上传svg文件，svg文件找UI小姐姐要
上传方法：
1.打开iconfont首页，点击右上角的上传图标
2.选择需要的svg文件上传，选择去颜色上传
3.上传完成后，点击批量操作，把需要的字体图标添加到购物车，下载使用即可

上传svg文件

批量添加购物车

---

平面转换transform属性

①：translate位移

描述：网页看作一个平面，浏览器左上角为原点，X/Y轴分别向右，向下。
有X、Y轴，取值px，正值为X向右、Y向下。负值为X向左、Y向上

语法：
transform: translateX(100px);-------X轴向右移动100px
transform: translateX(-100px);-------X轴向左移动100px
transform: translateY(100px);-------X轴向下移动100px
transform: translateY(-100px);-------X轴向上移动100px

连写：
错误写法：
transform: translateX(100px);
transform: translateY(50px);
由于CSS的层叠性，上述写法是错误写法，最终只会显示Y轴向下移动50像素。
正确写法：
transform: translate(100px,50px)-------X轴向右移动100px，Y轴向下移动50px

注意：连写的第一个值代表X轴，第二个值代表Y轴，中间用英文逗号隔开。
transfrom的注意项：
1.transform属性对行内元素无效
2.添加了transform属性的盒子可以提高盒子层级，并保留原来位置，类似于相对定位的特点
3.translate只给一个值默认值为X轴移动
4.translate赋值为百分比的时候，参考的是盒子本身的大小进行位移

②：利用translate百分比实现盒子居中效果

代码：

因为translate赋值为百分比参考的是盒子本身大小进行位移，所以利用该特性来实现居中的话，居中效果不会受到父盒子宽高改变而受到影响。
用margin实现居中的缺点：因为margin取值都是具体像素，所以当父元素修改宽高时，居中效果会失效。

rotate旋转

顺时针旋转取正值，逆时针旋转取负值，单位deg
语法：
transform：rotate(360deg); 顺时针旋转360度
transform：rotate(-360deg); 逆时针旋转360度

利用：transform-origin属性来改变转换原点：

transform-origin的赋值：
1.取方位名词（left、right、top、center、bottom）用得最多
2.具体的像素单位（正负均可）
transform-origin: -100px -100px;
3.百分比（参考盒子自身尺寸）
transform-origin: 50% 100%;

多重转换效果：

需求：水平移动的过程中还旋转着
错误写法：
transform: translate(600px)
transform: rotate(720deg)
由于CSS的层叠性，只能实现旋转720度
正确写法：
transform: translate(600px) rotate(720deg);
注意：由于旋转会改变坐标轴的方，当平移与旋转一起使用的时候，要把平移放在旋转的前面

scale缩放

可以实现盒子的缩放，默认值为1，大于1表示放大，小于1表示缩小
语法：
transform: scale(1.2); ------表示放大为原来的1.2倍
transform: scale(0.8); ------表示缩小为原来的0.8倍

案例：和平精英-缩放

代码：

  
  
  
  
  



  

    

      
    
    
【和平精英】“初火”音乐概念片：四圣觉醒......
  

效果图：

和平精英缩放案例

背景渐变：background-image: linear-gradient

语法：
background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：
方位：默认的方位从上到下
1.方位名词：to right,to right bottom
2.角度deg：直接写度数即可，不用再加to
参数2：颜色1；
参数3：颜色2；.....

代码：

效果图：

背景渐变效果图

产品展示案例

代码：

  
  
  
  
  



  

    
    

      
智能体
      
打造行业智能体，共建全场景智慧
    
  

效果图：

产品展示案例

华为综合案例

代码：

  
  
  
  
  
  



  

    

      

        
          

          

            
《ICT新视界》刊首语
            
笃行致远，共建具有获得感、幸福感、安全感的智慧城市
            
了解更多
          
        
      
      

          

          

            
产品
            
OceanStor Pacific海量存储斩获2021 Interop金奖
            
了解更多
          
        
      

          

          

            
行业观察
            
迈向智能世界2030
            
了解更多
          
        
    
  

效果图：

华为综合案例效果图