移动web第一天-字体图标/位移/渐变

1、字体图标

下载字体图标(https://www.iconfont.cn/)

1.1步骤：

1. 百度搜索iconfont

2. 搜索字体图标并添加购物车

3. 点击右上角购物车并添加至项目（如果没有项目就新建项目）

4. 下载至本地，解压文件并放在需要使用的文件夹得根目录

1.2 unicode编码使用

步骤：

1. 引入iconfont文件夹中的iconfont.css文件

2. 通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来

3. 声明字体图标库

        /* 声明iconfont字体图标库 font-family: iconfont;*/

        font-family: iconfont;

        font-style: normal;

        /* 字体图标的本质是文字 */

        font-size: 40px;

        color: orange;

      }

1.3 类名使用

步骤：

1. 引入iconfont文件夹中的iconfont.css文件

2.通过标签承接字体图标
类名：
第一个类名是固定的：iconfont;
第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可

···

1.4 在线链接调用

步骤：

1. 在线引入字体图标，要在链接前面添加 http:

   
   
   代码

1.5使用案例

1.购物车普通做法

代码

2.搭配伪元素

image.png

2、平面转换

2.1平面位移

使用：transform: translate(x, y) 一个数值默认改变x轴
transform: translateX() transform: translateY()
取值情况：像素单位取值 百分比取值：参考盒子自身大小
使用时加上过渡：transition: all 0.5s;

注意点：

1、transform属性对于行内元素是无效的；
2、添加transform属性的盒子可以提高盒子层级，保留原来的位置————类似相对定位的特点
基本用法如图：

代码

定位+tansform位移偏移实现盒子水平垂直居中
代码如下：

代码

案例：双开门
效果图：

双开门.gif

CSS代码如下
···

  .box {
    position: relative;
    width: 1366px;
    height: 600px;
    background: url("./images/bg.jpg");
    margin: 50px auto;
    overflow: hidden;
  }

  .box::before,
  .box::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 600px;
    background-image: url(./images/fm.jpg);
    /* 添加过渡，谁在变化就给谁添加 */
    transition: all .3s;
  }
  .box::before {
    left: 0;
  }
  .box::after {
    right: 0;
    background-position: right;
  }
  /* 动态布局 */
  .box:hover::before {
    transform: translateX(-100%);
  }
  .box:hover::after {
    transform: translateX(100%);
  }

···
HTML布局

html布局

2.2平面旋转

使用：transform: rotate(角度); 角度 取值为正顺时针 取值为负逆时针

2.2.1 转换点原点用法 用空格隔开 默认原点是盒子中心点

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

2.2.2 多重转换效果

写法：用空格隔开 transform: translateX(600px) rotate(360deg);
注意点：旋转会改变坐标轴方向
当平移与旋转一起使用的时候，要把平移放在旋转的前面
案例

多重转换.gif

代码

2.3平面缩放

使用： transform: scale(倍数); 缩放: scale() 大于1表示放大，小于1表示缩小
案例：和平精英播放按钮缩放

缩放-和平精英.gif

部分CSS

HTML布局

3、背景颜色渐变

使用语法：background-image: linear-gradient(参数1, 参数2, 参数3, ....);

参数1：

      方位：默认的方位从上到下
        1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom
        2.角度deg：直接写度数即可，不用再加to

参数2：颜色1；

参数3：颜色2；

用法代码如下：

day01综合案例：华为综合案例

实现：1.鼠标移动上盒子图片放大
2.鼠标移动上盒子出现背景渐变遮罩
3.鼠标移动上盒子文字向上
效果图如下：

华为综合案例.gif

html代码

        

            

                
                    
                    

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

                
                    
                    

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

                
                    
                    

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

CSS代码

~~明天继续努力丫！！！