CSS3 高级（字体图标

图标"/>

CSS3 高级（字体图标

目录

一、字体图标

        1、字体图标

        2、字体图标的优点：

        3、图标库：

二、平面转换

        1、位移

        2、位移绝对居中

        3、旋转

        4、转换圆点

        5、 缩放

三、渐变

        1、渐变背景

四、空间转换

        1、空间位移

        2、 透视

        3、空间旋转

         4、立体呈现

         5、空间缩放

五、动画

         1、实现步骤

         2、动画属性

---

一、字体图标

        1、字体图标

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

        2、字体图标的优点：

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

        3、图标库：

Iconfont： /

二、平面转换

目标：使用 transform 属性实现元素的 位移 、 旋转 、 缩放 等效果 平面转换          改变盒子在平面内的形态（位移、旋转、缩放）          2D转换 平面转换属性         transform

        1、位移

        2、位移绝对居中

        3、旋转

使用rotate实现元素旋转效果

        4、转换圆点

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

        5、 缩放

使用scale改变元素的尺寸

三、渐变

        1、渐变背景

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

工作中 透明颜色：transparent  到半透明

语法：

四、空间转换

        使用transform属性实现元素在空间内的位移、旋转、缩放等效果

        1、空间位移

         语法：

         取值（正负均可）

        像素单位数值 百分比

        2、 透视

        使用 perspective属性实现透视效果

        3、空间旋转

 

 

         4、立体呈现

使用transform-style: preserve-3d呈现立体图形

         5、空间缩放

五、动画

使用animation添加动画效果 动画效果：实现 多个状态 间的变化过程，动画 过程可控 （重复播放、最终画面、是否暂停）

         1、实现步骤

         2、动画属性

 

例：

使用steps实现逐帧动画

 

 

能够使用animation属性给一个元素添加多个动画效果