字体图标、平面转换、背景渐变、属性选择器

字体图标

本质是字体, 表现是图标

阿里巴巴矢量图标库

• unicode编码引入

  • 不直观, 不推荐

• font class 引入

  • 书写起来直观

  • 步骤

    • 1. 引入字体图标的css文件iconfont.css

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

    • 2. 书写标签, 添加iconfont公共类名

         <i class="iconfont icon-icon-"></i>

    • 3. 打开demo.html, 切换font class选项卡, 挑选图标, 复制类名, 黏贴

      

• symbol引入

  • 支持多色图标
  • 缺点: 兼容性差

• 在线引入

  • 挑选图标之后，点击加入购物车，在购物车页面，我们要选择添加至项目，没有项目就创建一个项目进行添加。

    

  • 在我的项目中，点击font class选项卡，再点击查看在线链接

    

  • 复制链接，回到html文件中，书写link标签，粘贴链接即可，注意：在链接前面补上https: <link rel="stylesheet" href="https://at.alicdn.com/t/font_3078827_7qfvbm86ly4.css">

其他图标库

• icomoon
• fontawesome

平面转换

transform

• 平移

  transform: translate(300px, 0);

  • translate(x, y)
  • translateX()
  • translateY()
  • 注意点：设置百分比参考的是本身

• 缩放

  transform: scale(2,2);或 transform: scale(2);

  • scale(x, y)
  • 0-1缩小，>1放大
  • 没有单位

• 旋转

  transform: rotate(-360deg);

  • rotate（xxdeg）
  • 左手定则

• 斜切

  transform: skewX(-45deg);

  • skewX(deg)
  • skewY(deg)
  • 应用场景 擦亮效果

• 注意: 行内元素添加转换是无效的

transform-origin

• 更改转换原点

• transform-origin：水平 垂直；

• 默认transform：center center；

• 方位名词

  transform-origin: right top;

  • left
  • top
  • center
  • right
  • bottom

• 具体像素

  transform-origin: 0 0

  • transform-origin: 0 0;

背景渐变

本质是背景图片

background-image: linear-gradient(方位, #0a0, #6cf)

background: linear-gradient(45deg, #6cf, #ff0, tomato, #0a0);

方位

• to right

  • 从左到右

• to left top

  • 从右下到左上

• 0deg

  • 从下到上

• 90deg

  • 从左到右

属性选择器

[class^='space']选择类名为space开头的标签

语法

• [ ... ]

[type]

[type="text"]

[class^="text"]

[class$="text"]

[class*="text"]