移动Web 第一天-CSDN博客

本文链接：https://blog.csdn.net/haixs/article/details/126773774

字体图标

字体图标展示的是图标，实际是字体。处理简单的、颜色单一的小图标

优点：

灵活性：灵活地修改样式，例如：尺寸、颜色等

轻量级：体积小、渲染快、降低服务器请求次数

兼容性：几乎兼容所有的主流浏览器

使用方便

图标库

Iconfont：iconfont-阿里巴巴矢量图标库阿里巴巴字体库 (常用)

使用步骤

步骤1：复制相关文件到本地目录下，并引入字体图标css文件。步骤2：标签使用字体图标。

引入字体图标样式表

  <link rel="stylesheet" href="./fonts/iconfont.css">

调用图标对应的类名，必须调用两个类名

//第一种使用方法 --- 类名

iconfont类 : 基本样式，包含字体的使用等

icon-xxx : 图标对应的类名

<span class="iconfont icon-weizhi"></span>

// 第二种使用字体编码  --- unicode编码
html
 <span class="iconfont">&#xe61f;</span>
css
span {
    font-family:'iconfont';
}
//第三种使用方法 --- 伪元素

  <style>
    .box::after {
      font-size: 100px;
      content: "\e73d";
    }
  </style>
</head>

<body>
  <span class="box iconfont"></span>
</body>

平面转换

位移

改变盒子在平面内的形态（位移、旋转、缩放）

2D转换

语法：transform : translate(水平移动距离，垂直移动距离);

取值（正负都可以取值）

1-像素单位数值

2-百分比（参照物为盒子自身的尺寸）

注意：X轴正向为右，Y轴正向为下

技巧

1-translate（）如果只给出一个值，表示X轴方向移动距离

2-单独设置某个方向的移动距离：translateX() & translateY()-

//位移实现绝对定位盒子居中

      /* 第一种方法 子元素设置宽高之后才能使用*/
      /* left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto; */
      /* 第二种方法 子元素设置宽高之后才能使用*/
      /* left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px; */
      /* 第三种方法 子元素不用设置宽高也能使用*/
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      /* text-align: center; */
      /* line-height: 100px; */

旋转

语法： transform : rotate（角度）

注意：角度单位是deg
技巧:取值正负都行

取值为正, 顺时针旋转

取值为负, 逆时针旋转
     //旋转
     transform: rotate(360deg);
转换原点

默认原点是盒子中心点

transform-origin : 原点水平位置原点垂直位置;

取值

方位名词(left、top、right、bottom、center)

像素单位数值

百分比（参照盒子自身尺寸计算）
//转换原点
transform-origin: 90% 100px;

transform-origin: left center;
多重转换
      //多重转换 就是代码的连写
      transform: translate(-50%, -50%) rotate(360deg);
原理：

旋转会改变网页元素的坐标轴向

先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
缩放

语法：transform：scale（缩放倍数）

技巧：一般情况，只为scale 设置一个值，表示x轴和y轴等比例缩放
transform: scale(缩放倍数); 

scale值大于1表示放大, scale值小于1表示缩小
 <style>
   .box {
     width: 400px;
     height: 300px;
     background-color: #8df;
     transition: all .2s;
     margin: 100px auto;
   }

   .box:hover {
     transform: scale(1.5);
   }
 </style>
<body> <div class="box"></div> </body>

渐变

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

      background-image: linear-gradient(
      方向，
      颜色1，
      颜色2
      );
      
      语法
      
      background-image: linear-gradient(45deg, #8df, pink);
      
      //常用的渐变色
      
      background-image: linear-gradient(transparent, rgba(0, 0, 0, .3));