携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第十一天，点击查看活动详情

字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果

• 字体图标的优点：
  • 灵活性：灵活地修改样式，例如：尺寸、颜色等
  • 轻量级：体积小、渲染快、降低服务器请求次数
  • 兼容性：几乎兼容所有主流浏览器
  • 使用方便：
    • 下载字体包
    • 使用字体图标

图标库

Iconfont：www.iconfont.cn

• 使用字体图标 - Unicode编码：
  • 引入样式表：iconfont.css
  • 复制粘贴图标对应的Unicode编码
  • 设置文字字体
• 使用字体图标 – 类名：
  • 引入字体图标样式表

• 调用图标对应的类名，必须调用2个类名
  • iconfont类：基本样式，包含字体的使用等
  • icon-xxx：图标对应的类名

平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

• 平面转换
  • 改变盒子在平面内的形态（位移、旋转、缩放）
  • 2D转换
• 平面转换属性
  • transform

位移

目标：使用translate实现元素位移效果

• 语法
  • transform: translate(水平移动距离, 垂直移动距离);
• 取值（正负均可）
  • 像素单位数值
  • 百分比（参照物为盒子自身尺寸）
  • 注意：X轴正向为右，Y轴正向为下
• 技巧
  • translate()如果只给出一个值, 表示x轴方向移动距离
  • 单独设置某个方向的移动距离：translateX() & translateY()

位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果 实现方法

利用margin:

利用translate(原理:位移取值为百分比数值，参照盒子自身尺寸计算移动距离):

旋转

目标：使用rotate实现元素旋转效果

• 语法
  • transform: rotate(角度);
  • 注意：角度单位是deg
• 技巧：取值正负均可
  • 取值为正, 则顺时针旋转
  • 取值为负, 则逆时针旋转

转换原点
目标：使用transform-origin属性改变转换原点

• 语法
  • 默认圆点是盒子中心点
  • transform-origin: 原点水平位置 原点垂直位置;
• 取值
  • 方位名词（left、top、right、bottom、center）
  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算）

多重转换
目标：使用transform复合属性实现多形态转换

缩放

目标：使用scale改变元素的尺寸

• 播放按钮
  • 布局
    • ::after
  • 样式
    • 居中
  • 效果
    • 缩放
    • 透明度（opacity）

渐变

目标：使用background-image属性实现渐变背景效果

目标：使用background-image属性实现渐变背景效果