移动web平面移动

字体图标

阿里巴巴矢量图标库

• 本质是文字，表现的是图标（用图标来表示文字的意思）

• 字体图标的使用方法：

  • 1、先在图标库找到需要的图标，添加到购物车
  • 2、打开购物车里面的图标，可以有三个使用方式，都是在css样式中通过link引入使用
    • 添加至项目：（常用）可以多次添加新图标在同一个项目里，在线使用，引入的是href里面需要补上网络传输协议 https:
      • Unicode
        • 图标的表现形式不是特别明显，是一段数字显示，不能让使用者一眼就能知道使用的是什么样的图标，所以不常用，而且只能支持IE9+的显示
      • Font class（常用~）
        • 1、复制fontclass的代码到link链接里，注意：需要加上https:
        • 2、挑选相应图标，并复制对应的类名，粘贴到html文件里对应标签里。
      • Symbol（未来的主流，支持多色图标，但是兼容性较差。）
        • 1、拷贝项目下面生成的symbol代码，注意：需要加上https:
        • 2、加入通用css代码（引入一次就行）
        • 3、挑选相应图标并获取类名，应用于页面
    • 下载素材
      • ui设计师常使用
    • 下载代码
      • 不推荐使用，不能在下载到本地第一版图标的情况下，再添加更多的图标，需要多次下载到本地，而且使用起来需要更新link的链接，麻烦~~~

好处：不会像精灵图那样图片放大后会失真，而且可以随意变换颜色。

平面转换

transform

• 平移——transform：translate(x y )

  • 特点：平移之后。不脱离标准流，占据原来的位置。
  • 特殊应用场景：在子绝父相的情况下， 设置以下代码参数可以实现在不知道父元素宽高的情况，也能实现子元素在父元素内的水平垂直居中位置： left: 50%; top: 50%; transform: translate(-50%, -50%);
  • 默认不写的情况下，代表的是X轴平移距离：transform：translate(数字+像素)
  • 代表的是X轴上的平移距离：transform：translateX(数字+像素)
  • 代表的是Y轴上面的平移距离：transform：translateY(数字+像素)

• 缩放——transform：scale(数字 )

  • 缩放的倍数

    • 小于1：原图像缩小的效果
    • 大于1：原图像放大的效果
    • 如果只设置一个值（宽或者高），则表示按照这个值进行等比例的缩放
    • 应用场景：悬停王者荣耀的图片的放大效果

• 旋转——transform：rotate(数字deg)

  • 旋转（2d）

    • 顺时针旋转--正值
    • 逆时针旋转--负值
    • 应用场景：旋转的关闭按钮

• 原点中心——transform:origin(方位词，方位词)

  • 默认原点中心是盒子的中心点

  • 更换旋转原点中心

    • 1、使用方位名词：left，right，top，bottom，center。例如transform:origin(left，top)
    • 2、如果只写一个方位名词，那么另外一个方位名词默认是center。 transform:origin(right)=transform:origin（right，center)
    • 3、具体的像素。例如：transform:origin(100px，100px)

• 特殊！！！

  • 多种转换效果

    • 原理：旋转会改变网页的坐标轴方向

      • 当需要在同一个元素上实现多种转换效果的情况时，transform的顺序，一定需要是先位移 ，后旋转。
      • 如果先写旋转，后写位移，则后面转换效果会以旋转后的坐标轴为准，会影响转换结果。

    • css样式里面已经添加了transform的属性，当需要在悬停的时候，做同样属性名字为transform的相关属性时，需将上面css样式里面的样式复制粘贴到下面的悬停中，再添加悬停时的对应样式，才能使得两个transform的多种属性同时发生效果。

目的/作用：实现页面的多种不同效果的展示

渐变

背景渐变的本质是背景图片

background-image: linear-gradient(方向，颜色1，颜色2）

• 默认的渐变方向是从上往下的线性渐变
• 1、方位名词。例如：to left（去左方）、to right top（去右上方）
• 2、角度（deg）。例如：0deg（从下往上）、45deg（从左下到右上），90deg（从左到右）

里面的值是通过 逗号， 来隔开

斜切方式表现的擦亮效果

斜切——transfrom：skew（角度）

• transfrom：skewX（角度）:在X轴上进行倾斜
• transfrom：skewY（角度）在Y轴上进行倾斜

XMind - Trial Version