字体图标
目标:实现网页中简洁的图标效果
- 本质上是字体,展示的样式为图标
- 用来处理简单、颜色单一的图片
优点
- 灵活性:样式改变灵活
- 轻量级:体积小、渲染快,降低服务器请求次数
- 兼容性高
- 使用方便:
- 下载字体包
- 使用字体图标
图标库
https://www.iconfont.cn/
使用字体图标
- 引入字体图标样式表
link rel=“stylesheet” href=“./iconfont.css”
- 调用字体图标对应的类名,必须调用两个类名
- iconfont类:基本样式,包括字体使用
- icon-xxx:图标对应的类名
平面转换
目标:使用transform属性实现元素的位移、旋转、缩放等效果
-
位移:
- 语法:transform:translate(水平移动距离, 垂直移动距离);
- 取值:像素单位数值/百分比
- 单独设置某个方向的值:translateX()/translateY()
-
旋转
- 语法:transform:rotate(角度 deg);
-
转换原点
-
transform-original(原点水平位置, 远点垂直位置);
-
取值:方位名词(left right top bottom center)/像素单位数值/百分比
-
用于原标签本身,不写入hover内
-
多重转换
-
语法:transform:translate() rotate();
-
注意:语法位置一般不轻易改变,因为旋转会改变坐标轴向,会使效果受影响
-
缩放
-
语法:transform:scale(x轴缩放倍数, y轴缩放倍数);或transform:scale(缩放倍数);
渐变
目标:使用background-image属性实现渐变背景效果
- 渐变是多个颜色逐渐变化的视觉效果
- 一般用于设置盒子的背景
- 语法:background-image:linear-gradient(颜色1, 颜色2…);
提示:网页开发中一般使用透明-rgba的效果,一般写为
background-image:linear-gradient(
transparent,
rgba(0,0,0,0.5)
);