移动Web第一天
字体图标(字体图标展示的是图标,本质是字体。处理简单的颜色单一的图片。)
- 目标:使用字体图标技巧实现网页中简洁的图标效果
- 优点:
- 灵活性:灵活的修改样式,例如:尺寸,颜色等
- 轻量级:体积小,渲染快,降低服务器请求次数
- 兼容性:几乎兼容所有的主流浏览器
- 使用方便:1,下载字体包2.使用字体图标
- 图标库:`https://www.iconfont.cn/
- 使用:
- 引入字体图标样式表(link rel=“srtlesheet” href=“./iconfont.css”)
- 调用图标对应的类名,必须调用两个类名:1.iconfont”基本样式,包括字体的使用2.icon-xxx:图标对应的类名
平面转换(改变盒子在平面内的形态(位移,旋转,缩放)、2D属性)
位移
- 目标:使用transform属性实现元素的位移、旋转、缩放等效果
- 语法:transform:translate(水平移动距离,垂直移动距离)
- 取值:正负均可
- 像素单位数值
- 百分比
- 技巧:
- translate()如果只给出一个值,表示x轴方向移动距离
- 单独设置某个方向的移动距离:translateX()& translate Y()
- 实现方法:
- 原理:位移值为百分比数值,参照盒子自身尺寸计算移动距离
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
- 旋转:(遇到旋转尽量写最后,因为旋转会影响坐标轴的轴向)
- 目标:使用rotate实现元素旋转效果
- 语法:transform:rotate(角度);角度单位是deg(取值正负均可)。取值为正,则顺时针旋转,反之则逆时针旋转
- 转换原点:
- 目标:使用transform-origin属性改变转换的原点
- 语法:
- 默认原点是盒子中心点
- transform-origin:原点水平位置,原点垂直位置
- 取值:
- 方位名词(left、top、right、button、center)
- 像素单位数值
- 百分比(参照盒子自身尺寸计算)
- 多重转换
- 目标:使用transform复合实现多形态转换
- 多重转换技巧:transform:translate() rotate();
- 多重转换原理:
- 旋转会改变网页元素的坐标轴的轴向
- 先写旋转,则后面的转换效果以旋转后的轴向为准,会影响结果
- 缩放
- 目标:使用scale改变元素尺寸
- 语法:transform:scale(x轴缩放倍数,y轴缩放倍数)
- 技巧:一般情况下,只为scale设置一个值,表示x轴与y轴等比例缩放
- transform:scale(缩放倍数)
- scale值大于1表示放大,小于则表示缩小
渐变
- 目标:使用background-image属性实现渐变背景效果
- 渐变是多个颜色逐渐变化的视觉效果
- 语法:
background-image:liear-gradient(颜色1,颜色2)