字体图标
使用字体图标可以实现简洁的图标效果, 字体图标展示的是图标, 本质是字体, 适合简单, 颜色单一的图标
优势
- 灵活性: 灵活的修改样式, 比如尺寸, 颜色等
- 轻量级: 体积小, 渲染快, 降低服务器请求次数
- 兼容性: 几乎兼容所有主流浏览器
- 使用方便:
- 下载字体包
- 使用字体图标
使用字体图标:
下载字体包
- 阿里字体图标库: https://www.iconfont.cn/
- 我的账户 167****0001
- 建议使用官方的图标, 免费还好用, 效果复杂的图标还是使用精灵图实现
- 登录后→选择图标库, 点进去查看图标→选择合适的图标，加入购物车→点击购物车→把购物车添加至项目中 → 没有项目就建一个 →下载至本地
使用字体图标
- 打开demo_index.html页面, 里面会教我们如何集成到项目中
-
先把iconfont.css文件引入到项目
-
使用一个标签(一般是span或者i), 添加 iconfont 和 icon-xihuan 两个类名
字体图标基本使用-类名 -
可以通过css的方式, 调整字体图标的尺寸和颜色
扩展一下, 了解 iconfont 这个类名的作用
- iconfont类名 定义在 iconfont.css文件中
- iconfont类名最重要的事情是引用字体
- 字体定义中引用了字体文件
上传矢量图
如果图标库中找不到需要的图标. iconFont网站支持上传矢量图生成字体图标
- 与设计师沟通, 得到SVG矢量图
- 在iconFont网站上传图标, 然后下载使用
- 上传时建议去除颜色提交
- 提交完成后, 查看我的资源, 一样加入购物车→下载使用
平面转换
使用transform属性实现元素的位移、旋转、缩放等效果
平面转换需要拆开理解
- 平面就是2D的概念, 只关注元素的X轴和Y轴
- 转换就是改变元素在平面内的状态, 比如位置, 旋转, 缩放
位移效果
语法: transform: translate(水平移动距离,垂直移动距离)
取值说明:
- 正负均可
- 像素单位值
- 半分比值 (参考物是盒子自身尺寸)
- x轴正向为右, y轴正向为下
使用技巧:
-
translate()如果只给一个值, 表示x轴方向的移动距离
-
可以单独设置某个方向的移动距离: translateX() & translateY()
位移-基本使用
渐变背景
使用background-image属性实现渐变背景效果
语法:
取值:
- 渐变方向: 可选
- to 方位名词
- 角度度数
- 终点位置: 可选
- 半分比
作用:
-
渐变是多个颜色逐渐变化的视觉效果
-
一般用于设置盒子的背景