移动Web学习笔记-字体图标、平面转换、渐变字体图标使用、平面转换属性、元素位移效果、位移-绝对定位居中、元素旋转、转

1.字体图标

使用字体图形技巧实现网页中简洁的图标效果字体图形展示的是图标，本质是字体处理简单的、颜色单一的图片

字体图标的优点：

灵活性：灵活的修改样式
轻量级：体积小，渲染快，降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便

字体图标来源 Iconfont：www.iconfont.cn/ 登录 → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

案例：淘宝购物车

第一步通过link引入

第二步用i标签引入类名 iconfont（必须写）加样式类名

  1.引入iconfont.css  <link rel="stylesheet" href="./iconfont/iconfont.css" />
  
  
  2.<i class="iconfont icon-cart-Empty-fill icon1"></i>
      购物车
      <i class="iconfont icon-arrow-down"></i>

2.平面转换

使用transform属性实现元素的位移、旋转、缩放等效果改变盒子在平面内的形态（位移、旋转、缩放） 2D转换

特点： 1.transform可以增大盒子的层级； 2.transform对于行内元素不起效果

位移：使用transform:translate实现元素位移效果

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

        /* tf 像素单位取值 */
        transform: translate(-100px, 100px);

        /* tf 百分比 取值：参考盒子自身大小 */
        transform: translate(100%, -50%);

        /* 如果 translate(一个值) 表示x轴方向的移动，y轴不动*/
        transform: translate(100px);

        /* X,Y小写大写都有效果 */
        transform: translateY(100px);

取值：像素单位数值百分比（参照物为盒子自身尺寸） X轴正向为右，Y轴正向为下

技巧： translate()如果只给出一个值，表示X轴方向移动距离单独设置某个方向的移动距离：translateX()和translateY()

位移-绝对定位居中

核心代码： positition:absolute; left:50%; top:50%; transform:translate(-50%,-50%);（important！）

      position: absolute;
        /* 固定代码 */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离

旋转：transform:rotate实现元素旋转效果

语法：transform:rotate（角度）;

 /* 顺时针旋转 360deg */
        transform: rotate(360deg);
        /* 逆顺时针旋转 360deg */
        transform: rotate(-360deg);

注意：角度单位是deg

技巧：取值正负均可取值为正，顺时针旋转取值为负，逆时针旋转

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

语法：默认圆点是盒子中心点 transform-origin：原点水平位置原点垂直位置

取值：方位名词（left、top、right、bottom、center）

transform-origin: left bottom; 
transform-origin: center center;

像素单位取值百分比（参照盒子自身尺寸计算）

多重转换：transform复合属性实现多形态转换

例

transform: translate(600px) rotate(720deg);

注意：

1.平移和旋转如果一起使用，必须要先写平移，再写旋转，因为旋转会改变坐标轴的方向

2.transform 复合属性，复合了平移，旋转，缩放，属性值之间以空格隔开

缩放transform：scale

语法： transform：scale（X轴缩放倍数，Y轴缩放倍数）;

/* 缩放: scale() 大于1表示放大，小于1表示缩小 */
        /* transform: scale(1.2, 1.2); */

        /* 缩放如果只有一个值，那么控制的是宽度的缩放，高度等比例缩放 */
        transform: scale(2);

技巧：一般情况下，只为scale设置一个值，表示X轴和Y轴等比例缩放

transform：scale（缩放倍数）；

scale值大于1表示放大，scale值小于1表示缩小（important！）

3.渐变:background-image: linear-gradient

概念：background-image属性实现渐变背景效果

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

语法：背景颜色渐变 bgi
background-image: linear-gradient(参数1, 参数2, 参数3, ....);

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

      参数2：颜色1；

      参数3：颜色2；.....

background-image: linear-gradient(to right bottom, green, orange);

background-image: linear-gradient(45deg, green, orange, blue, yellow);
      }