CSS3新特性

CSS3新特性

1.1、字体图标

何为字体图标？

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

字体图标的优点：

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

Iconfont

下载字体包步骤：登录（新浪微博/手机号） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

使用字体图标有以下两种方式：

• Unicode编码
• 类名

使用字体图标 - Unicode编码（方式一）：

将选好的字体包下载到本地，并引入样式表：iconfont.css

<!-- 1.引入字体图标样式表 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">

复制粘贴图标对应的Unicode编码

<i class="iconfont"></i>

设置文字字体相关属性

.iconfont {font-size: 26px;color: gray;
}

使用字体图标 – 类名（方式二）：

引入字体图标样式表

调用图标对应的类名，必须调用2个类名

• iconfont类：基本样式，包含字体的使用等
• icon-xxx：图标对应的类名

<i class="iconfont icon-upload"></i>
<i class="iconfont icon-gouwuche"></i>

1.2、平面转换

何为平面转换？

• 平面转换是其改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
• 2D转换

位移

具体语法：

• transform：translate(水平移动距离, 垂直移动距离)

取值（正负均可）

• 像素单位数值
• 百分比（参照物为盒子自身尺寸）

注：X轴正向为右，Y轴正向为下，位移可配合过渡实现，效果可能会较好

translate()如果只给出一个值，则表示x轴方向移动距离

单独设置某个方向的移动距离：translateX() & translateY()

使用translate快速实现绝对定位的元素居中效果

实现方法：

.son {position: absolute;left: 50%;top: 50%;width: 200px;height: 100px;/* 设置固定值不够灵活，如果盒子尺寸变了，margin-left/right的值也要手动去改变 *//* margin-left: -100px;margin-top: -50px; *//* 位移：百分比参考盒子自身尺寸计算结果 *//* 较为灵活 盒子尺寸变了，无需去手动改变尺寸 */transform: translate(-50%,-50%);background-color: pink;
}

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

旋转

具体语法：

transform：rotate(角度)

注：角度单位是deg，旋转需配合过渡实现，否则效果可能出不来

取值正负均可，若取值为正，则顺时针旋转。取值为负，则逆时针旋转

转换原点

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

具体语法：

• 默认圆点是盒子中心点
• transform-origin：原点水平位置 原点垂直位置；

取值

• 方位名词（left、top、right、bottom、center）
• 像素单位数值
• 百分比（参照盒子自身尺寸计算）

注：改变转换原点的css属性在元素本身上写，不要在hover上写

多重转换

transform: translate(300px) rotate(360deg);

多重转换原理

• 旋转会改变网页元素的坐标轴向
• 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放

具体语法：

transform：scale(x轴缩放倍数, y轴缩放倍数)

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

• transform: scale(缩放倍数);
• scale值大于1表示放大, scale值小于1表示缩小

/* 本身的尺寸，不放大也不缩小 */
transform: scale(1);
/* 小于1 缩小 */
transform: scale(0.8);
/* 大于1 放大 */
transform: scale(1.5);

倾斜

具体语法：

transform: skew(角度)

正数向左倾斜，负数则向右倾斜

transform: skew(50deg);

1.3、渐变

何为渐变？

• 渐变是多个颜色逐渐变化的视觉效果，常用于设置盒子的背景

具体语法：

/* 半透明渐变：透明--->rgba() */
background-image: linear-gradient(0deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);/* 渐变的方向（或角度） 颜色值1,颜色值2,颜色值3 */
background-image: linear-gradient(transparent, rgba(0, 0, 0, .6));

渐变

1.4、空间转换

何为空间转换？

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

空间转换也叫3D转换

属性：transform

具体语法：

• transform：translate3d(x, y, z)；
• transform：translateX(值)；
• transform：translateY(值)；
• transform：translateZ(值)；

取值（正负均可）

• 像素单位数值
• 百分比

透视

生活中，同一个物体，观察距离不同，视觉上有什么区别？

近大远小（近实远虚）、近清楚远模糊

默认情况下，为什么无法观察到Z轴位移效果？

因为Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果

使用perspective属性实现透视效果

perspective: 800px;

属性（添加给父级）

• perspective：值;
• 取值：像素单位数值， 数值一般在800 – 1200

主要作用

• 空间转换时，为元素添加近大远小（近实远虚）、近实远虚的视觉效果

立体呈现

使用perspective透视属性能否呈现立体图形？

不能，perspective只增加近大远小、近实远虚的视觉效果

呈现立体图形步骤：

• 给盒子父元素添加transform-style:preserve-3d;，使子元素处于真正的3d空间
• 按需求设置子盒子的位置（位移或旋转）

transform-style: preserve-3d;

1.5、动画

何为动画？

• 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
• 构成动画的最小单元：帧或动画帧

过渡可以实现2个状态间的变化过程

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

使用步骤：

定义动画

/* 定义动画 方式一 */
@keyframes changeBoxWidth {from {width: 200px;}to {width: 800px;}
}/* 定义动画 方式二 */
@keyframes changeBoxSize {0% {width: 200px;}50% {width: 600px;height: 300px;}100% {width: 900px;height: 400px;}
}

使用动画

复合属性写法：

/* 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态 */
/* infinite 无限循环 */
/* alternate 动画来回执行 */
animation: change 1s steps(3) 2s infinite alternate;/* 执行完毕时状态 注：添加此属性，需要把无限循环和动画方向去除 否则效果可能出不来 */
/* 默认值：动画停留在最初的状态 */
/* 默认值：动画停留在结束的状态 forwards */
animation: change 1s steps(3) forwards;

注意：

• 动画名称和动画时长必须赋值
• 取值不分先后顺序
• 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

拆分写法：

逐帧动画

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

animation-timing-function: steps(N)； 将动画过程等分成N份

多组动画

可以给元素添加多个动画

animation: moveBox 1s steps(12) infinite, run 5s infinite;

小提示：如果动画的开始状态和元素的默认样式是相同的，可以省略开始状态的代码

@keyframes move {to / 100% {transform: translateX(-1600px);}
}

1.6、