图标"/>
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转换 平面转换属性 transform1、位移
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属性给一个元素添加多个动画效果
更多推荐
CSS3 高级(字体图标
发布评论