前端知识点复习-字体图标、位移、缩放、动画

#博学谷IT学习技术支持#

一、字体图标：

字体图标展示的是图标，本质是字体。 处理简单的、颜色单一的图片。

优点：

字体图标的优点：

        灵活性：灵活地修改样式，例如：尺寸、颜色等

        轻量级：体积小、渲染快、降低服务器请求次数

        兼容性：几乎兼容所有主流浏览器

        使用方便：1. 下载字体包  2. 使用字体图标

二、位移

语法 ：transform: translate(水平移动距离, 垂直移动距离);

取值（正负均可）：1.像素单位数值  2.百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

技巧：translate()如果只给出一个值, 表示x轴方向移动距离 ；单独设置某个方向的移动距离：translateX() & translateY()

使用位移实现定位居中核心代码：

 （原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离）

三、缩放

语法 ： transform: scale(x轴缩放倍数, y轴缩放倍数);

技巧：一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

          transform: scale(缩放倍数);

          scale值大于1表示放大, scale值小于1表示缩小

四：动画

属性：

animation-name ：动画名称

animati on-duration ：动画时长

animation-delay ：延迟时间

animation-fill-mode ：动画执行完毕时状态

forwards：最后一帧状态

backwards：第一帧状态

animation-timing-function ：速度曲线

steps(数字)：逐帧动画

animation-iteration-count ：重复次数

infinite为无限循环

animation-direction ：动画执行方向

alternate为反向

animation-play-state ：暂停动画

paused为暂停，通常配合:hover使用

使用steps实现逐帧动画 ：

逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

        animation-timing-function: steps(N)；

        将动画过程等分成N份